將列搜索應用於當前jQuery DataTable第2部分

Question

因此，我能夠解決我的問題的第1部分，該部分位於此處： 將列搜索應用於當前jQuery DataTable

那是利用下拉選擇方法對各個列。 但是，似乎使用輸入框會更有效。

所以我遇到了這個小提琴： http : //jsfiddle.net/dmurph/b71jtjf1/

這正是我想要的。 所以首先，我添加到當前表中：

 <table class="table table-bordered" id="example1" width="100%">
 <thead>
   <tr>
     <th>Edit/Del</th>
     <th>Booking</th>
     <th>Quote</th>
     ........
   </tr>
 </thead>
 <thead class="filters">
   <tr>
     <th>Edit/Del</th>
     <th>Booking</th>
     <th>Quote</th>
     ........
   </tr>
 </thead>
 //  the DATATABLE IN BETWEEN </thead> and </table>
 </table>

現在，利用我上面提供的jfiddle鏈接中的代碼，這就是我總共擁有的：

 $('#example1 .filters th').each(function(){
   var title = $('#example1 thead th').eq($(this).index()).text();
   $(this).html('<input type="text" placeholder="Search '+title+'" />');
 });     

接下來是我原來的用於打印數據表的JavaScript：

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

到目前為止一切順利...數據表仍然顯示。 但是這里是我遇到問題的部分：

在上面的代碼之后，我立即有了這個（根據jfiddle鏈接）：

 $dataTable.columns().eq(0).each(function(colIdx){
   $('input', $('.filters th')[colIdx]).on('keyup change', function(){
     table
       .column(colIdx)
       .search(this.value)
       .draw();
   });
 });

因此出現錯誤，直到我嘗試搜索INPUT字段為止……首先，列搜索不會搜索任何內容，但是隨后我檢查了控制台，並且收到的錯誤是“ Uncaught ReferenceError：未定義表”指向到第805行，這沒有任何意義，因為第805行在我的原始代碼中顯示如下：

 "scrollX": true

我不確定為什么會收到此錯誤。

Answer 1

將table更改為$dataTable ，因此它顯示為：

$dataTable
   .column(colIdx)
   .search(this.value)
   .draw();