Angular DataTable - 自定义分页和信息

Posted 2023-05-07

【中文标题】Angular DataTable - 自定义分页和信息

【英文标题】：Angular DataTable - Custom Pagination & Info

【发布时间】：2016-12-31 09:27:13

【问题描述】：

我是 Angular JS 的新手。我正在尝试实现数据表。 我指的是下面的链接。

http://l-lin.github.io/angular-datatables/

现在我需要对数据表配置进行一些自定义更改。

例如。

分页选项需要采用下图中提供的格式。

分页信息需要如下所示。

期待回复。

如果有人遇到过类似的问题，请帮忙。

~~苏利亚

【问题讨论】：

请说明您希望如何更改分页布局以及分页信息的含义。更改没什么大不了的，但很难猜出例如您指的是哪些图标以及“Vanilla ...”应该如何成为信息的一部分。

@davidkonrad，“Vanilla..”是我在获取表格之前从用户那里得到的输入。

【参考方案1】：

我已经修复了页面信息问题。请看下面的代码。

vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
                     .withDisplayLength(10)
                     .withOption('bFilter', false)
                     .withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"p>')
                     .withLanguage(
                          "sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>\"'+$rootScope.searchValue+'\"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_ <a>Show All</a></span>',
                           "processing": "Processing...",
                           "loadingRecords": "Loading...",
                           "paginate": 
                                "first": '<i class="fa fa-backward" aria-hidden="true"></i>',
                                "last": '<i class="fa fa-forward" aria-hidden="true"></i>',
                                "next": "Next",
                                "previous": "Previous"
                            
                     );

但仍然无法解决分页按钮自定义问题。我正在关闭这个问题，因为我已经发布了另一个关于页面控制问题的问题。 .

链接：

Angular datatable - get current page & Total page

如果有人对这两个问题有更好的解决方案，请向我提供您的建议:):)

【参考方案2】：

如果你需要在 AngularJS 中进行分页检查，

http://ui-grid.info/docs/#/tutorial/214_pagination

【讨论】：

OP不需要分页，dataTables内置了很多分页样式，他想把默认分页改成别的。