jQuery DataTables plugin：特定の列の入力と選択のためのサーバー側フィルタ

Question

jQuery DataTablesプラグインを使用して、サーバー側のソートを行いました。

私の問題は、いくつかの特定の列をサーバー側でフィルタリングする方法です。 <input>でフィルタリングしたい列と、<select>でフィルタリングする列があります。

ドキュメントには入力フィルタリングの別々の例があり、すべて列をループしますが、それらの組み合わせはループしません。
私はこの質問を見ましたが、助けにはなりませんでした。 DataTables Server Side Individual Column Filtering

Answer 1

DataTablesのColumn Filteringアドオンが必要と考えています。私は以下のようになり働いたので、私は同じ問題を持っていたhttp://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

Answer 2

を参照してください、

のDataTableの列のような場所で

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

はこのtableColumns変数を使用していました。

はさらに選択/テキストフィールドのフィルタに追加しない/追加するために同じを使用し、私は

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

のような条件が

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

、INITCOMPLETEでは、以下を参照してください使用しました