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

我正在使用带有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>

我已经尝试使用官方网站suggests(删除我发布的代码,然后做一个简单的复制/粘贴,并更改ID),但它没有做什么.我猜我做错了什么,但我不知道是什么.

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

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.