將列搜索應用於當前的 jQuery DataTable

Question

我有一個當前運行正常的 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，所以它應該是最新的。

有沒有人看到我做錯了什么以及我可以做些什么來糾正這個問題？

Answer 1

將<tfoot>添加到您的表中。 引用column.footer()的表達式期望它存在。