使用DataTables在顶部和底部进行分页

Question

我正在使用带有DataTables jQuery插件的SB Admin 2主题.是否有可能有位于分页顶部,并在底部的表,在同一时间？如果是,我怎么能实现它？这是我目前作为工作代码所拥有的:

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

我已经尝试使用官方网站建议的内容(删除我发布的代码,然后进行简单的复制/粘贴,并更改ID),但它绝对没有做任何事情.我猜我做错了什么,但我不知道是什么.

Answer 1

基于Bootrsap的样式(例如SB Admin 2主题)需要特制的dom选项值.domBootstrap的默认值如下所示:

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

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

您可以使用下面的代码将分页放在顶部.您可以通过调整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>>",
});

有关代码和演示,请参阅此jsFiddle.