每列的表分类器筛选器

时间:2014-11-17 14:33:47

标签: javascript jquery ajax tablesorter

你能帮我个人专栏的ajax表分拣机吗? 是否有任何内置方法来调用过滤器列的ajax调用?

我的源代码在

之下
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...'
  }*/

},

}); 请帮助我以上的事情 提前谢谢。

1 个答案:

答案 0 :(得分:0)

如果您没有使用寻呼机小部件,那么您可以绑定到filterStart事件。但请确保添加一个方法以不再进行另一个ajax调用,因为filterStart事件将在表更新后再次触发。尝试这样的事情(这是未经测试的代码):

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');
        }
    });