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>

我已经尝试使用官方网站suggests（删除我发布的代码，然后进行简单的复制/粘贴，并更改ID），但它绝对没有做任何事情。我猜测我做错了什么，但我不知道是什么。

Answer 1

基于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>>",

分页控件在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>>",
});

请参阅this jsFiddle以获取代码和演示。

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

1 个答案: