jquery - 使用数据表在顶部和底部分页

Question

我正在使用 SB Admin 2 主题，以及 DataTables jQuery 插件。是否可以将分页同时定位在表格的顶部和底部？如果是的话，我怎样才能实现它？这是我目前的工作代码:

<script>

$('#data-table').DataTable({
  responsive: true,
  "pageLength": 25,
  "columnDefs": [ {
  "targets"  : 'no-sort',
  "orderable": false,
  }],
  "language": {
          "lengthMenu": "Show _MENU_ items per page",
          "zeroRecords": "Nothing found. Please change your search term",
          "info": "Page _PAGE_ of _PAGES_",
          "infoEmpty": "No results",
          "infoFiltered": "(filtered out of _MAX_)",
    "search":       "Search:",
    "paginate": {
      "first":      "First",
      "last":       "Last",
      "next":       ">>",
      "previous":   "<<"
    }
  }
});

</script>

我尝试过使用官方网站suggests (删除我发布的代码，然后进行简单的复制/粘贴，并更改 id)，但它绝对没有任何作用。我猜我做错了什么，但我不知道是什么。

Answer 1

基于 Bootrsap 的样式(例如 SB Admin 2 主题)需要专门设计值 dom选项。 dom 的默认值使用Bootstrap如下所示:

dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
     "<'row'<'col-sm-12'tr>>" +
     "<'row'<'col-sm-5'i><'col-sm-7'p>>",

分页控制由 dom 值中的字母 p 表示。

您可以使用下面的代码将分页放在顶部。您可以通过调整 dom 选项的值来调整列大小或删除某些控件。

var table = $('#example').DataTable({
    dom: "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'p>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-5'i><'col-sm-7'p>>",
});

参见this jsFiddle用于代码和演示。