javascript - 使用 dataTables dom 定位元素

Question

我正在尝试将记录按钮的位置更改为底部，但我想在顶部修复搜索栏

"dom": '<"top"i>rt<"bottom"flp><"clear">',

我该怎么办？

Answer 1

这是我在我的一个网站上使用的解决方案。

我有一个位于溢出 div 内的数据表。我想让我的搜索栏位于此 div 之外，以便在滚动溢出时搜索栏保持静止并且不会与数据表一起滚动。

我创建了自己的文本框作为搜索工具，然后将其连接到数据表搜索功能。

<label><strong>Search: </strong><input type="text" id="myInputTextField"
</label>
<div class="grid_container">
    <table id="datatable">
        <thead>
            <tr>
                <th>heading1</th>
                <th>Heading 2</th>
            </tr>
        <thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
            </tr>
        </tbody>
    </table> 
</div>

然后我用于创建数据表的 jquery 看起来像

$(function(){
  $('#datatable').DataTable({
      "paging": true,
      "ordering": true,
      "info": true,
      "lengthMenu": [10, 25, 50, 75, 100],
      "order": [[0, 'desc']],
      "sDom": '<"top">l<"grid_container" t>ip'
  });
  var oTable = $('#datatable').DataTable();
  $('#myInputTextField').keyup(function () {
      oTable.search($(this).val()).draw();
  })

})

函数的第一部分是正常的数据表设置。该功能的第二部分是将我的搜索文本框与文本框中每个 keyup 上的数据表搜索功能相关联。