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

Question

So I was able to get part 1 of my question to work, which is located here: Apply column search to current jQuery DataTable

That was utilizing a dropdown select method to the individual columns. However it appears that utilizing an INPUT box would be more effective.

So I came across this fiddle: http://jsfiddle.net/dmurph/b71jtjf1/

This is exactly what I am looking for. So first off, I added to my current table:

 <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>

Now utilizing the code from the jfiddle link I provided above, this is what I have in total:

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

My original javascript to print the datatable comes next:

 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>';
       }
     }]
   });

So far so good...the datatable still displays. But here comes the part where I'm having the issue:

Immediately after the above code, I have this (according to the jfiddle link):

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

So errors until I try to search the INPUT field...well first of all, the column search doesn't search anything, but then I check the console and the error I am receiving is "Uncaught ReferenceError: table is not defined" pointing to line 805, which doesn't really make sense, because line 805 is in my original code where it reads below:

 "scrollX": true

I am not sure why I am getting this error.

Answer 1

Change table to $dataTable , so it reads:

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