2016-05-03 10 views
1

すべての私の仲間のコーダーに挨拶します。 現在のjQuery DataTableに列の検索を適用します

は私が正常に機能している場所で、現在のjQueryのDataTableがあります述べたように

var $dataTable = $('#example1').DataTable({ 
    "ajax": 'api/tableSearch.php', 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    "scrollY": 600, 
    "scrollX": true, 
    "bDestroy": true, 
    "columnDefs": [{ 
    "targets": 0, 
    "render": function (data, type, full, meta){ 
     return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>': 
    } 
    }] 
}); 

は、上記のコードは、それに応じて作品を...検索フィルター作品、ソートの作品は、すべてが動作します。私は私の現在のコードに上記のリンクからコードを追加しようとしました
https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

、次のように:ここに示したように、私がやりたい何

は、このデータテーブルに列検索を追加することです

var $dataTable = $('#example1').DataTable({ 
    "ajax": 'api/tableSearch.php', 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    "scrollY": 600, 
    "scrollX": true, 
    "bDestroy": true, 
    "columnDefs": [{ 
    "targets": 0, 
    "render": function (data, type, full, meta){ 
     return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>': 
    } 
    }], // begin here 
    initComplete: function(){ 
    this.api().columns().every(function(){ 
     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>') 
     }); 
     }); 
     } 
    });   
});  

エラーは発生せず、DataTableはまだ読み込まれますが、列の検索は行われません。

jQuery-2.1.3.minを使用していますので、最新の状態にする必要があります。

誰かが私が間違っていることを見て、私はこの問題を解決するために何ができるのですか?

+1

テーブルのマークアップに '' '' ''がありますか? '' var select = $( '') .appendTo($(column.footer())。empty()) '' var select = $ ' ' –

+0

それはそうだった...私はテーブルにフッターを追加する必要があった。しかし今、私のコラムは整列していません。 –

答えて

1

テーブルに<tfoot>を追加します。 column.footer()を参照する式は、それが存在することを予期しています。

関連する問題