CODEWITHSUNDEEP
jqueryajaxfilteringserver-sidetablesorter
lindon
lindon

Reputation: 654

Using an external filter with tablesorter when using ajax

Is there a way with tablesorter to use a dropdown filter external to the table when using ajax that filters based on criteria not related to a column in the table?

For instance, if the table is a list of accounts, i'd like to be able to filter on expired accounts even if that is not one of the columns in the table. Each of the columns in the table will also have their own standard tablesorter filters.

Since I'm using ajax and server-side filtering, even the column filters are just used to send a $_REQUEST to the ajax url and not filtering what is showing in the table. So I'd like to be able to send such a $_REQUEST without having to associate filter_formatter with a specific column.

I realize I can do this by adding a dummy column, use filter_formatter, and bind the external dropdown through a change function similar to the example shown at this example, but I was hoping there was a simpler way. Thanks

Upvotes: 3

Views: 1889

Answers (1)

Mottie
Mottie

Reputation: 86403

Try using the customAjaxUrl option. Within that callback code, you can get the currently selected external filter and append it as a string which is sent to your server. Something like this:

// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
    // get current selection & add it to the url
    return url += '&filter=' + $('.external-filter').val();
}

To answer your question from the comments, you can try binding to the change event of the external filter, then save that filter value into the table data (if you don't want to use a scoped/global variable). Try something like this:

$('.external-filter').on('change', function(){
    $('table')
        .data('filter_value', $(this).val() )
        .trigger('update');
});

then within the customAjaxUrl function do this:

// modify the url after all processing has been applied
customAjaxUrl: function(table, url) {
    // get current selection & add it to the url
    return url += '&filter=' + $(table).data('filter_value');
}

Upvotes: 2

Related Questions