将分页移出数据表

时间:2018-08-30 18:56:56

标签: javascript jquery datatables

我正在尝试将默认分页移动到表格之外。 Datables文档说,只有一个分页绑定是.page()来更改当前页面。问题是它没有考虑到达到页面限制时按钮被禁用,当前页面等问题。我有什么办法可以将分页按钮复制到表格外而无需编写所有分页功能用手吗?

<table id="table_id" class="display">
  <thead>
      <tr>
          <th>Column 1</th>
          <th>Column 2</th>
      </tr>
  </thead>
</table>
<div id="custom-pagination">
</div>
<script>
let dt = $('#table_id').DataTable();

$(dt).on( 'draw.dt', function () {
  $(dt).find('.datatTables_paginate').appendTo('#custom-pagination'); 
});

</script>

1 个答案:

答案 0 :(得分:1)

对我来说,这已经过测试并且可以正常工作:

$('#table').DataTable({
    ... other options ... ,
    initComplete: (settings, json)=>{
        $('.dataTables_paginate').appendTo('body');
    },
});

但是如果您在同一页面中还有其他数据表,则需要使用表ID来绑定元素,如下所示:

$('#table1').DataTable({
    ... other options ... ,
    initComplete: (settings, json)=>{
        $('#table1_paginate').appendTo('body');
    },
});

等等!