如何在DataTables的“上一页”和“下一页”按钮之间显示有关页码的信息？

Question

我需要在DataTable表this is how it should look like中的“上一页/下一页”按钮之间显示有关当前页码和总页数的文本。我设置了pagingType："simple"，但我不知道如何在这两个按钮之间放置文本。

Answer 1

以下方法将为您提供一个符合您的需求的基本布局-但您可能需要提供额外的样式来实现您可能想要的外观。

代码如下：

<script type="text/javascript">

  $(document).ready(function() {
    
    var table = $('#example').DataTable({
      "pagingType": "full",
      "language": {
        "info": "_START_ of _TOTAL_",
        "paginate": {
          "first":      "",
          "last":       "",
          "next":       ">",
          "previous":   "<"
        }
      } ,
      "initComplete": function() {
        tabulate(this.api().page.info());
      }
    });

    table.on( 'draw', function () {
      tabulate(table.page.info());
    } );

  } );

  function tabulate(pageInfo) {
    var curr = pageInfo.page + 1;
    var tot = pageInfo.pages;
    $( "<span>" + curr + " of " + tot + "</span>" ).insertAfter( "a.paginate_button.previous" );
  }
  
</script>

使用默认的DataTables样式，如下所示：

​

​

如果在相关方向上有更多的页面，“下一页”和“上一页”箭头会在鼠标悬停时突出显示：

​

​

代码说明：

根据我们的需求，我们用定制替换了标准的pagination language。

我们使用带有api callback的initComplete来处理定制分页显示的初始显示，并使用draw()事件函数来处理后续更改。

tabulate()函数使用page.info()数据来获取所需的数字。