How to reset/clear all filters (select2, select, input) in the x-editable table?

Question

I want to have a reset/clear button for all the filters in use, but I can't figure out what to fire off on on-click event tied to that button... for example:

What would I have to fire off and/or attach & pass to what in order to reset all these select2, select and input fields and restore all the filters to null/empty values?

Answer 1

On click of your button, all you need is to reset the value of select2.

See this programmatic way to reset it https://select2.github.io/examples.html#programmatic

All you need for your button to reset all the select2 inputs instead of 1 as shown in the example.

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').val(null).trigger("change");
    $('#yourSecondSelect2').val(null).trigger("change");
    ....
});

Just in case, you're using 3.5.x version, then there's small change as seen here http://select2.github.io/select2/#programmatic

$('#yourButton').on('click', function() {
    $('#yourfirstSelect2').select2("val", "");
    $('#yourSecondSelect2').select2("val", "");
    ....
});

For resetting other values in x-editable you can follow this x-editable resetting fields.

There's always a jQuery way to clearing everything in a form -

$('#formName')[0].reset();