CODEWITHSUNDEEP
angularjsangular-ui-grid
madhu
madhu

Reputation: 69

Angular ui grid pagination -number of items in a page display

Angular UI Grid pagination is displaying 1 to 26 items in the footer instead of 1 to 25 items. I might be missing something simple, but can't figure it out. Can you suggest what change do I need to make so that it displays 1 to 25 items? http://ui-grid.info/docs/#/tutorial/214_pagination

screen shot here

Upvotes: 2

Views: 7208

Answers (4)

Pankaj Chauhan
Pankaj Chauhan

Reputation: 356

Simple fix: Upgrade your library.

Upvotes: 0

Md. Masudur Rahman
Md. Masudur Rahman

Reputation: 1078

I have solved this issue by changing the library code slightly as following:

The ui-grid.js library code exists this wrong code:

{{ 1 + paginationApi.getLastRowIndex() }}

Just replace the above code as following:

{{ paginationApi.getLastRowIndex() }}

I hope this change will solve this issue.

In GitHub - Pagination: displayed items number #5915, I have also commented this solution.

Upvotes: 2

mez79
mez79

Reputation: 103

I had exactly the same issue with ui-grid 4.0.2. Just upgraded to the latest version (4.0.4) and the pagination info is now correct without fixing the paginationTemplateby myself!

Upvotes: 0

Tim Harker
Tim Harker

Reputation: 2417

This should fix it, a tweak to the normal 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' }
  ]
};

Here's a working Plunker, http://plnkr.co/edit/bVHH8oRtaOfo3oJiH5Kq?p=preview.

Upvotes: 1

Related Questions