DataTables js中的自定义分页

Question

如何在datatables.js 中添加自定义分页，如下图所示？

Answer 1

添加分页的最快方法是将参数“分页”添加到您的初始选项中，如下所示：

$('#your_table_id').dataTable( {
    "paging": true
});

参数'paging'默认设置为true。

您也可以添加参数pagingType并将其设置为full_numbers，如下所示：

$('#your_table_id').dataTable( {
    "paging": true,
    "pagingType": "full_numbers"
});

要显示其他分页按钮（第一个、最后一个）并向它们添加自定义名称，您应该使用以下代码：

$('#myTable').DataTable({
  "pagingType": "full_numbers",
  "language": {
    "paginate": {
      "first":    "«",
      "previous": "‹",
      "next":     "›",
      "last":     "»"
    }
  }
});

要添加样式，您可以覆盖一些这样的 CSS 规则：

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid blue !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border: 1px solid red !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  border: 1px solid grey !important;
  /* other rules */
}

不幸的是，它很丑，因为你必须使用标志!important。

另一种更困难的方法是编写自己的插件。