搜索不適用於動態創建的行

Question

我正在使用jQuery Datatables，並且我有一個HTML頁面，用於顯示錶中的數據庫記錄。最初，表格中加載了50條記錄，然後每次滾動到底部時追加50條記錄。

現在，jQuery DataTables搜索函數對前50條記錄工作正常，但無法識別在無限滾動期間動態創建的其他記錄。

HTML和數據表初始化：

$(document).ready(function() { 
 
    $('body #new_table').dataTable({ 
 
    'scrollX': true, 
 
    'scrollY': 600, 
 
    'paging': false, 
 
    "ordering": false, 
 
    'info' : false, 
 
    'aaSorting': [] 
 

 
}); 
 
});

<table id="new_table"> 
 
    <thead> 
 
    <tr> 
 
     <th>ChemicalID</th> 
 
     <th>Product</th> 
 
     <th>Manufacturer</th> 
 
     <th>Registered Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="items" class="display table table-bordered"> 
 
    @foreach($data as $chemical) 
 
    <tr class="item"> 
 
     <td>{{$chemical->ChemicalID}}</td> 
 
     <td>{{$chemical->Product}}</td> 
 
     <td>{{$chemical->Manufacturer}}</td> 
 
     <td>{{$chemical->RegisteredName}}</td> 
 
    </tr> 
 
    @endforeach 
 
    </tbody> 
 
</table>

Answer 1

原因

如果你只是追加tr節點表中，搜索將不會找到那些行作爲jQuery DataTables不知道它們。

SOLUTION

使用row.add()或rows.add() API方法來添加新行，只有新的行會是jQuery的數據表可見。

例如，新行添加到表和重繪：

var table = $('#example').DataTable(); 

table.row.add([ 
    "Tiger Nixon", 
    "System Architect", 
    "Edinburgh", 
    "61", 
    "2011/04/25", 
    "$320,800" 
]).draw(false); 

見this jsFiddle示範。

要使用tr節點添加一個新行到表和重繪：

var table = $('#example').DataTable(); 

table.row.add($(
    '<tr>' + 
    '<td>Tiger Nixon</td>' + 
    '<td>System Architect</td>' + 
    '<td>Edinburgh</td>' + 
    '<td>61</td>' + 
    '<td>2011/04/25</td>' + 
    '<td>$320,800</td>' + 
    '</tr>' 
)).draw(false); 

見this jsFiddle示範。