Question

我使用的是jQuery Datatables，我有一个HTML页面，我在表格中显示数据库中的记录。最初，该表加载了50条记录，然后每次滚动到底部时我附加50条记录。

现在，jQuery DataTables搜索功能适用于前50个记录，但无法识别在无限滚动期间动态创建的其他记录。

HTML和DataTables初始化：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<强>原因

如果您只是将tr个节点附加到表中，搜索将找不到这些行，因为jQuery DataTables不知道它们。

<强>解

使用row.add()或rows.add() API方法添加新行，只有jQuery DataTables才能看到新行。

例如，要向表中添加新行并重绘：

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进行演示。

搜索不适用于动态创建的行

1 个答案: