は2

Question

現在のjQuery DATATABLE部分に列検索を適用だから私はここに配置されて、動作するように私の質問の一部1を得ることができた：Apply column search to current jQuery DataTable

個々の列にドロップダウン選択方法を利用したことが。しかし、INPUTボックスを利用する方がより効果的です。

だから私はこのフィドルに出くわした：http://jsfiddle.net/dmurph/b71jtjf1/

これは私が探しています正確に何です。印刷に

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

私の元のjavascriptを：今、私は上記のjfiddleリンクからコードを利用し

が

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

、これは私が合計で持っているものである。したがって、最初のオフ、私は私の現在のテーブルに追加しましたデータテーブルは次に来る：

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リンクに応じて）持っている：私は、INPUTを検索しようとするまで

ので

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

エラーフィールド...まず第一に、列の検索は何も検索しませんが、私はコンソールをチェックし、私が受け取っているエラーは "Uncaught ReferenceError：テーブルが定義されていません"という行805を指しています。ライン805は私の元のコードの下にあるので、意味があります。

"scrollX": true 

なぜこのエラーが発生するのかわかりません。

（Leeluu Dallasの声で）誰かが私のエラーを見たら、 "please .... help。"

ありがとうございます。

Answer 1

$dataTableから

変更table、それは読む：

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