将列搜索应用于当前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();