时间戳

首页 > 解决方案 > jQuery DataTable 自定义分页按钮

jquery - jQuery DataTable 自定义分页按钮

问题描述

我正在使用jQuery dataTables插件来显示数据，并且在一种情况下我需要自定义分页按钮，如下所示

<<< Action 1 of 3 >>>

我试过了"dom": '<"#df"<"pull-right"i p>>',，输出如下

Action 1 of 3
<<<  >>>

我想要分页按钮内的信息。有人可以帮忙吗？

标签： jquerydatatables

解决方案

您可以使用 jQuery 在分页块中替换和添加文本。

作为您的 DataTable 选项，请尝试以下操作：

"pagingType": "simple",

^ 仅更改“上一个”和“下一个”按钮的分页格式。

要在分页块中替换和添加文本，请在表格绘制事件处理程序中执行以下操作：

dTable.on( 'draw', function () {
    $('.paginate_button.previous').html("<<<");
    $('.paginate_button.next').html(">>>");
    var total_records = dTable.rows().count();
    var page_length = dTable.page.info().length;
    var total_pages = Math.ceil(total_records / page_length);
    var current_page = dTable.page.info().page+1;
    $('.paginate_button.previous').after("<strong>Action "+current_page+" of "+(page_length<0?1:total_pages)+"</strong>");
} );

注意：更改dTable为您初始化的变量名称DataTable(..)。

https://datatables.net/examples/basic_init/alt_pagination.html

推荐阅读