Question

所以我能够将我的问题的第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

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

Answer 1

将table更改为$dataTable，内容如下：

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

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

1 个答案: