Angular ui 网格分页 - 页面显示中的项目数答案

【问题标题】：Angular ui grid pagination -number of items in a page displayAngular ui 网格分页 - 页面显示中的项目数
【发布时间】：2017-03-13 13:00:07
【问题描述】：

Angular UI Grid 分页在页脚中显示 1 到 26 个项目，而不是 1 到 25 个项目。我可能错过了一些简单的东西，但无法弄清楚。您能否建议我需要进行哪些更改才能显示 1 到 25 个项目？ http://ui-grid.info/docs/#/tutorial/214_pagination

screen shot here

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

我通过稍微更改库代码解决了这个问题，如下所示：

ui-grid.js库代码存在这个错误代码：

{{ 1 + paginationApi.getLastRowIndex() }}

只需将上面的代码替换为如下：

{{ paginationApi.getLastRowIndex() }}

我希望这个改动能解决这个问题。

在 GitHub - Pagination: displayed items number #5915，我也评论了这个解决方案。

【讨论】：

【解决方案2】：

这应该可以解决它，对正常的paginationTemplate 进行调整：

var correctTotalPaginationTemplate = 
  //same as normal template, but fixed totals:  {{(((grid.options.paginationCurrentPage-1)*grid.options.paginationPageSize)+1)}}   {{(grid.options.paginationCurrentPage*grid.options.paginationPageSize>grid.options.totalItems?grid.options.totalItems:grid.options.paginationCurrentPage*grid.options.paginationPageSize)}}
  "<div role=\"contentinfo\" class=\"ui-grid-pager-panel\" ui-grid-pager ng-show=\"grid.options.enablePaginationControls\"><div role=\"navigation\" class=\"ui-grid-pager-container\"><div role=\"menubar\" class=\"ui-grid-pager-control\"><button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-first\" ui-grid-one-bind-title=\"aria.pageToFirst\" ui-grid-one-bind-aria-label=\"aria.pageToFirst\" ng-click=\"pageFirstPageClick()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle\"><div class=\"first-bar\"></div></div></button> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-previous\" ui-grid-one-bind-title=\"aria.pageBack\" ui-grid-one-bind-aria-label=\"aria.pageBack\" ng-click=\"pagePreviousPageClick()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle prev-triangle\"></div></button> <input type=\"number\" ui-grid-one-bind-title=\"aria.pageSelected\" ui-grid-one-bind-aria-label=\"aria.pageSelected\" class=\"ui-grid-pager-control-input\" ng-model=\"grid.options.paginationCurrentPage\" min=\"1\" max=\"{{ paginationApi.getTotalPages() }}\" required> <span class=\"ui-grid-pager-max-pages-number\" ng-show=\"paginationApi.getTotalPages() > 0\"><abbr ui-grid-one-bind-title=\"paginationOf\">/</abbr> {{ paginationApi.getTotalPages() }}</span> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-next\" ui-grid-one-bind-title=\"aria.pageForward\" ui-grid-one-bind-aria-label=\"aria.pageForward\" ng-click=\"pageNextPageClick()\" ng-disabled=\"cantPageForward()\"><div class=\"last-triangle next-triangle\"></div></button> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-last\" ui-grid-one-bind-title=\"aria.pageToLast\" ui-grid-one-bind-aria-label=\"aria.pageToLast\" ng-click=\"pageLastPageClick()\" ng-disabled=\"cantPageToLast()\"><div class=\"last-triangle\"><div class=\"last-bar\"></div></div></button></div><div class=\"ui-grid-pager-row-count-picker\" ng-if=\"grid.options.paginationPageSizes.length > 1\"><select ui-grid-one-bind-aria-labelledby-grid=\"'items-per-page-label'\" ng-model=\"grid.options.paginationPageSize\" ng-options=\"o as o for o in grid.options.paginationPageSizes\"></select><span ui-grid-one-bind-id-grid=\"'items-per-page-label'\" class=\"ui-grid-pager-row-count-label\">&nbsp;{{sizesLabel}}</span></div><span ng-if=\"grid.options.paginationPageSizes.length <= 1\" class=\"ui-grid-pager-row-count-label\">{{grid.options.paginationPageSize}}&nbsp;{{sizesLabel}}</span></div><div class=\"ui-grid-pager-count-container\"><div class=\"ui-grid-pager-count\"><span ng-show=\"grid.options.totalItems > 0\">{{(((grid.options.paginationCurrentPage-1)*grid.options.paginationPageSize)+1)}} <abbr ui-grid-one-bind-title=\"paginationThrough\">-</abbr> {{(grid.options.paginationCurrentPage*grid.options.paginationPageSize>grid.options.totalItems?grid.options.totalItems:grid.options.paginationCurrentPage*grid.options.paginationPageSize)}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}</span></div></div></div>";
$scope.gridOptions1 = {
  paginationPageSizes: [25, 50, 75],
  paginationPageSize: 25,
  paginationTemplate: correctTotalPaginationTemplate,
  columnDefs: [
    { name: 'name' },
    { name: 'gender' },
    { name: 'company' }
  ]
};

这是一个正在工作的 Plunker，http://plnkr.co/edit/bVHH8oRtaOfo3oJiH5Kq?p=preview。

【讨论】：

谢谢。这是有效的，但如果数据只有 15 行，那么它显示 15 的 1-25，而不是 15 的 1-15。如果有 192 行，最后一页将显示 192 的 151-200，而不是 151 -192 / 192
好收获！我更新了代码和 Plunker。需要帮助请叫我。乐于助人！
完美运行。谢谢。
为什么需要这个修复？是不是 ui-grid 的 bug？
好问题。也许在这个国家，ui-grid 开发人员是这样的:-)。不过说真的，我相信该功能处于“alpha”阶段（使用风险自负）-ui-grid.info/docs/#/tutorial/214_pagination。

【解决方案3】：

我在使用 ui-grid 4.0.2 时遇到了完全相同的问题。刚刚升级到最新版本（4.0.4），分页信息现在是正确的，没有自己修复paginationTemplate！

【讨论】：

【解决方案4】：

简单修复：升级您的库。

【讨论】：