検索ボックスは、私たちは、ソートが機能していますが、検索ボックスが</p> <p>我々が働いていないすべての列に検索ボックス用&二thead要素をソートするための</p> <p>まずthead要素を働いていない</p> <p>検索ボックスのために第二thead要素に検索ボックスを置くデータテーブル

Question

で動作しません書き込み検索ボックスに任意の値を設定します。

私たちのHTMLコード

<thead> 
    <tr> 
     <td><b>Customer Name</b></td> 
     <td><b>Contact Number</b></td> 
     <td><b>Contact Person Name</b></td> 
     <td><b>Contact Person Contact Number</b></td> 
     <td><b>City</b></td> 
     <td><b>Country</b></td> 
     <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><td><b>Sales user name</b></td><?php } ?> 
     <td><b>Schedule</b></td> 
     <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><td><b>Created User</b></td><?php } ?> 
     <td><b>Action</b></td> 
     <?php if($_SESSION['user_type'] != 'Director'){ ?> 
     <td><b>Add</b></td> 
     <?php } ?> 
    </tr> 
</thead> 
<thead> 
    <tr> 
     <th>Customer Name</th> 
     <th>Contact Number</th> 
     <th>Contact Person Name</th> 
     <th>Contact Person Contact Number</th> 
     <th>City</th> 
     <th>Country</th> 
     <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><th>Sales user name</th><?php } ?> 
     <th>Schedule</th> 
     <?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><th>Created User</th><?php } ?> 
     <th>Action</th> 
     <?php if($_SESSION['user_type'] != 'Director'){ ?> 
     <th>Add</th> 
     <?php } ?> 
    </tr> 
</thead> 

は、私たちのjqueryのコード例から

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

// DataTable 
var table = $('#example1').DataTable(); 

// Apply the search 
table.columns().every(function() { 
    var that = this; 
    //alert(1); 
    $('input', this.header()).on('keyup change', function() { 
     if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
     } 
    }); 
}); 

Answer 1

コピー貼り付けコードはめったに異なるシナリオで動作しないまたは前提条件が変更されたとき。 S：あなたが動作するように上記のコードをしたい場合は、<input>「が

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

お知らせthead:eq(1)セレクタ、あなたが<td>を使用して上記の使用しているハックs」を挿入しているとき、あなたは少なくとも、二<thead>を対象としなければなりません<th>の代わりに本当に悪いです。論理を欺くことはしないでください！その後、あなたの "検索を適用する"目的が列ベースの検索を実装する場合は、間違っています。使用しているコードは、連続してで検索します。すべて列は、常に列ベースではありません。注入された<inputs>に実装列ベースの検索は、次のようになります。

$('input', '#example1 thead:eq(1)').each(function(index, input) { 
    $(input).on('keyup change', function() { 
    table.column(index).search(this.value).draw(); 
    }) 
}) 

は、これはあなたが<input>年代のそれぞれで検索を絞り込むことができ、複数のカラムベースの検索を与えます。

作業のデモ - >http://jsfiddle.net/xbdr7qfj/