jQuery DataTables插件：用于输入并在特定列中进行选择的服务器端筛选器

Question

使用jQuery DataTables插件，我得到了服务器端的排序。

我现在的问题是如何过滤服务器端的一些特定的列。我想通过<input>过滤一些列，我想通过<select>过滤一些列。

该文档有单独的输入过滤示例，然后选择过滤，通过全部列循环，但不是其组合。
我见过这个问题，但没有帮助。 DataTables Server Side Individual Column Filtering

Answer 1

我认为DataTables的列过滤插件是您需要的。见http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

Answer 2

我有同样的问题，所以我摸索出像下面，

var tableColumns = [ 
 
        { "data": "adcampaignName", "name": "Adcampaign Name","search" : true}, 
 
        { "data": "advertiser.name", "name": "Advertiser Name","search" : true }, 
 
        { "data": "offerName", "name": "Offer Name","search" : true }, 
 
        { "data": "dailyBudget", "name": "Daily Budget","search" : false}, 
 
        { "data": "startingOn", "name": "Starting On","search" : false }, 
 
        { "data": "endingOn", "name": "Ending On","search" : false }, 
 
        { "data": "status", "name": 'Status',"search" : true,"dropdown" : true } 
 
      ];

在类似数据表的列的地方使用了TableColumn来变量。

另外使用的相同的添加/不上选择/文本框过滤器添加我使用的条件等

if(tableColumns[index].search && !tableColumns[index].dropdown){

下面看到的，在initComplete，

$('#example').DataTable({ 
 
    \t   "processing": true, 
 
    \t   "serverSide": true, 
 
      "columns": tableColumns, 
 
    \t   "ajax": $.fn.dataTable.pipeline({ 
 
    \t    url: '/test.json', 
 
    \t    pages: 5, // number of pages to cache 
 
    \t   \t "type": "POST" 
 
    \t   }), 
 
    \t   
 
\t \t  initComplete: function() { 
 
\t    \t this.api().columns().every(function (index) { 
 
\t    \t var column = this; 
 
\t    if(tableColumns[index].search && tableColumns[index].dropdown){ 
 
\t     var select = $('<select><option value=""></option></select>') 
 
\t      .appendTo($(column.footer()).empty()) 
 
\t      .on('change', function() { 
 
\t       var val = $.fn.dataTable.util.escapeRegex(
 
\t        $(this).val() 
 
\t      ); 
 
\t 
 
\t       column 
 
\t        .search(val ? '^'+val+'$' : '', true, false) 
 
\t        .draw(); 
 
\t      }); 
 
\t 
 
\t     //column.data().unique().sort().each(function (d, j) { 
 
\t      select.append('<option value="active">Active</option>') 
 
\t      select.append('<option value="inactive">InActive</option>') 
 
\t     //}); 
 
\t    } 
 
\t   }); 
 
\t   } 
 
    \t  }); 
 
    \t 
 
    \t // Setup - add a text input to each footer cell 
 
    \t  $('#example tfoot th').each(function (index) { 
 
    \t  \t if(tableColumns[index].search && !tableColumns[index].dropdown){ 
 
\t \t   var title = $(this).text(); 
 
\t \t   $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
 
    \t  \t } 
 
    \t  }); 
 
    \t 
 
    \t  // DataTable 
 
    \t  var table = $('#example').DataTable(); 
 
    \t 
 
    \t  // Apply the search 
 
    \t  table.columns().every(function (index) { 
 
    \t   var that = this; 
 
    \t   \t if(tableColumns[index].search && !tableColumns[index].dropdown){ 
 
\t \t   $('input', this.footer()).on('keyup change', function() { 
 
\t \t    if (that.search() !== this.value) { 
 
\t \t     that 
 
\t \t      .search(this.value) 
 
\t \t      .draw(); 
 
\t \t    } 
 
\t \t   }); 
 
    \t   \t } 
 
    \t  });