使用 dataTables dom 定位元素答案

【问题标题】：Positioning elements with dataTables dom使用 dataTables dom 定位元素
【发布时间】：2017-04-27 16:15:54
【问题描述】：

我正在尝试将记录位置按钮更改为底部，但我想在顶部修复搜索栏我尝试了这个，但这一切都从上到下移动。

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

我该怎么办？

【问题讨论】：

“记录地点”按钮是指下拉菜单吗？

标签： javascript jquery css datatables

【解决方案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();
  })

})

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

【讨论】：

【解决方案2】：

好的，我用这段代码解决了我的问题。

"dom": '<"top"if>rt<"bottom"lp><"clear">',

【讨论】：