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