将列搜索应用于当前 jQuery DataTable 第 2 部分答案

【问题标题】：Apply column search to current jQuery DataTable part 2将列搜索应用于当前 jQuery DataTable 第 2 部分
【发布时间】：2016-05-03 16:58:28
【问题描述】：

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

这是对各个列使用下拉选择方法。但是，使用 INPUT 框似乎会更有效。

所以我遇到了这个小提琴：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 字段...首先，列搜索不搜索任何内容，但随后我检查控制台，我收到的错误是“未捕获的 ReferenceError：表不是已定义”指向第 805 行，这实际上没有意义，因为第 805 行在我的原始代码中，如下所示：

 "scrollX": true

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

【问题讨论】：

将table 更改为$dataTable？所以它读作$dataTable.column(colIdx).search(this.value).draw();
@Gyrocode.com - 成功了！！！谢谢你，先生。为你点赞。

标签： javascript jquery search datatables

【解决方案1】：

将table 更改为$dataTable，如下所示：

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

【讨论】：