DataTables - 各列の検索/フィルタボックス（AJAX）

Question

各列でフィルタを区切ることには多くの疑問があります。しかし、私は同じ質問については見つけられませんでしたが、もちろんAJAXに触れました。

私はほぼ1ヶ月間datatablesを使用しています。私のデータテーブルに追加できるクールなものを探しているうちに、各列にフィルタを備えたこのデータテーブルを持つサイトが見つかりました。私はそれを持っているが、私はそれを理解できない。

私は、DataTableの中にいくつかのドキュメントを読んだが、私がそれを理解するのは困難であると思われます。だから誰かが私の問題を解決するのを助けることができますか？ところで

はここに私のAJAXコードです：

var initAjaxDatatables = function() { 

var grid = new Datatable(); 

grid.init({ 
    src: $("#applicationTracker"), 
    loadingMessage: 'Loading...', 
    dataTable: { 
     "bStateSave": true, 

     "lengthMenu": [ 
      [10, 20, 50, 100, 150, -1], 
      [10, 20, 50, 100, 150, "All"] 
     ], 
     "pageLength": 10, 
     "ajax": { 
      "url": root_path + "/public/ajax/report/application/LoadAllDataAsync/", 
     }, 
     "order": [ 
      [1, "asc"] 
     ], 

     buttons: [ 
      { extend: 'print', className: 'btn default' }, 
      { extend: 'copy', className: 'btn default' }, 
      { extend: 'pdf', className: 'btn default' }, 
      { extend: 'excel', className: 'btn default' }, 
      { extend: 'csv', className: 'btn default' }, 
      { 
       text: 'Reload', 
       className: 'btn default', 
       action: function (e, dt, node, config) { 
        dt.ajax.reload(); 
       } 
      } 
     ], 

    } 
}); 

// handle datatable custom tools 
$('#datatable_ajax_tools > li > a.tool-action').on('click', function() { 
    var action = $(this).attr('data-action'); 
    grid.getDataTable().button(action).trigger(); 
}); 

Answer 1

私はフッターの列ごとにフィルタを実装している、これを試してみてください。

$(document).ready(function() { 
    var data = []; 
    data.push(
     [1,"Sasha","Brenna","0800 1111"], 
     [2,"Sage","Mia","(01012) 405872"], 
     [3,"Chelsea","Allistair","076 0578 0265"], 
     [4,"Uta","Savannah","070 1247 5884"], 
     [5,"Remedios","Berk","0995 181 0007"], 
     [6,"Ruby","Wayne","0800 1111"], 
     [7,"Faith","Fredericka","(01709) 099879"], 
     [8,"Myra","Harrison","070 4241 9576"], 
     [9,"Drake","Miriam","0800 733635"], 
     [10,"Reed","Shannon","076 8597 5067"] 
    ); 

    var count = 0; 
    $('#data_table').DataTable({ 
     data:   data, 

     initComplete: function(){ 
      this.api().columns().every(function() { 
       /*if(count == 2) 
       {*/ 
        var column = this; 
        var select = $('<select><option value=""></option></select>') 
         .appendTo($(column.footer()).empty()) 
         .on('change', function() { 
          var val = $.fn.dataTable.util.escapeRegex(
           $(this).val() 
          ); 

          column 
           .search(val ? '^'+val+'$' : '', true, false) 
           .draw(); 
         }); 

        column.data().unique().sort().each(function (d, j) { 
         select.append('<option value="'+d+'">'+d+'</option>') 
        }); 
       /*}*/ 
       count++; 
      }); 
     } 
    }); 
}); 

Github Demo

Working JSFiddle