Table sorter filter for each column

Question

Can you please help me to have table sorter with ajax for individual column. is there anything inbuilt method to call ajax call for filter column?

My source code is below

theme: 'blue',
widthFixed: true,
widgets: [ 'stickyHeaders', 'columnSelector','filter'],
textExtraction: function(node, table, cellIndex){
    return $(node).text().replace(/\s'/g,'');
},
headers: {0: { filter: false},6: { filter: false},7: { filter: false},8: { filter: false}},
widgetOptions : {


  // Use the $.tablesorter.storage utility to save the most recent filters
  filter_saveFilters : false,
  // jQuery selector string of an element used to reset the filters
  filter_reset : 'button.reset',
  // add custom selector elements to the filter row
  filter_formatter : {
    /*0 : function($cell, indx){
      return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {     
        dateFormat: 'dd/mm/yyyy',
        changeMonth: true,
        changeYear : true
      });
    },*/
    // Alphanumeric (match)
    4 : function($cell, indx){
      return $.tablesorter.filterFormatter.select2( $cell, indx, {
        match : true,         // adds "filter-match" to header
       // cellText : 'Select: ', // Cell text
        width: '90%',         // adjusted width to allow for cell text
        value: [<%=createdBy%>], // initial values
        placeholder: "Search.."

      });
    },
    5 : function($cell, indx){
      return $.tablesorter.filterFormatter.select2( $cell, indx, {
        match : true,         // adds "filter-match" to header
       // cellText : 'Select: ', // Cell text
        width: '90%',         // adjusted width to allow for cell text
        value: [<%=actions%>], // initial values
        placeholder: "Search.."
      });
    },
  /*7 : function($cell, indx){
      return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
        // from : '08/01/2013', // default from date
        // to   : '1/18/2014',  // default to date
        dateFormat : 'dd/MM/yyyy',
        changeMonth : true,
        changeYear : true,
        cellText : ""
      });
    }*/
  },



  // option added in v2.16.0
  filter_selectSource : {
    // Alphanumeric match (prefix only)
    // added as select2 options (you could also use select2 data option)
    4 : function(table, column) {
      return [<%=createdBy%>];
    },
    5 : function(table, column) {
      return [<%=actions%>];
    },
  }

/*  filter_placeholder : {
    from : 'From...',
    to   : 'To...'
  }*/

},

}); Please help me with above thing thanks in advance.

Answer 1

If you aren't using the pager widget, then you can bind to the filterStart event. But make sure to add a method to not make another ajax call because the filterStart event will fire again after the table updates. Try something like this (this is untested code):

var $table = $('table');

$table
    .on('filterBegin', function( event, filters ){
        // only trigger an ajax call if the filters have changed
        if ( filters.join(',') !== $table.data('lastSearch').join(',')  ) {
            // do some ajax stuff here
            // then in the success callback, save content to table...
            // then update
            $table
                .find('tbody')
                .html( newContent )
                .trigger('update');
        }
    })
    .tablesorter({
        // add your other options here
        widgetOptions: {
            // you might need to set this option to prevent
            // rows from being hidden... maybe!
            filter_serversideFiltering : true
        },
        initialized: function(){
            lastSearch = $table.data('lastSearch');
        }
    });