javascript - 将列搜索应用于当前 jQuery DataTable 第 2 部分

Question

因此，我能够解决问题的第 1 部分，该部分位于:Apply column search to current jQuery DataTable

这是对各个列使用下拉选择方法。然而，似乎利用输入框会更有效。

所以我遇到了这个 fiddle :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: table is not” Defined”指向第 805 行，这实际上没有意义，因为第 805 行位于我的原始代码中，其内容如下:

 "scrollX": true

我不确定为什么会收到此错误。

Answer 1

将 table 更改为 $dataTable，因此内容为:

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