How to show 1 to 10 of 12 results in angular

Question

I want to show pagination detail in the bottom of table in angular. I try these code:

<table>
  <tr dir-paginate="reject in rejects|orderBy:sortKey:reverse|filter:search|itemsPerPage:itemsPerPage"
                                current-page="currentPage" style="border-bottom: solid 1px #ccc">
<td>@{{itemsPerPage *(currentPage-1)+$index+1}}</td>
<td><a ng-href="recorddetail/@{{reject.rec_id}}"
    style="text-decoration: none;">@{{reject.fullname}}</a></td>
                       <td>@{{reject.name}}</td>
                       <td>@{{reject.id}}</td>
                       <td>@{{reject.placeofb}}</td>
                       <td>@{{reject.dateofb}}</td>                          
                      </tr>

     </table>

    <div style="float: left">
      <span>Showing Result @{{itemsPerPage *(currentPage-1)+$index+1}} to  @{{     
      (itemsPerPage * currentPage) }} of  @{{rejects.length}}</span>     
    </div>
    <dir-pagination-controls
         page-size="1" direction-links="true"
             boundary-links="true" style="margin-top: 0; float: right;margin-bottom:
        10px;">
    </dir-pagination-controls>

How can i get "show 1 to 10 of 72 results" in page and search page in angular?

Answer 1

UI Grid formerly known as ng-grid which is purely built on angularjs library and it covered all core grid features like sorting, paging, filtering, exporting, etc.

You can try ui-grid

Answer 2

Here is one idea how you can do it. It worked for me, I'm using ng-grid-2.0.8.js

When receiving the data from server - calculate how many pages in total

$scope.totalPages = 0;
function getData() {
    ...
    $scope.totalPages = Math.ceil(data.length / pageSize);
    ...
};

Then make sure that you are showing the footer and use your custom template, like so:

$scope.gridOptions = {
    ...
    showFooter: true,
    footerTemplate: getCustomFooterTemplate(),
    ...
};

function getCustomFooterTemplate() {
        return "footerTemplate.html",
            '<div ng-show="showFooter" class="ngFooterPanel" ng-class="{\'ui-widget-content\': jqueryUITheme, ' +
            '\'ui-corner-bottom\': jqueryUITheme}" ng-style="footerStyle()">\n' +
            '   <div class="ngTotalSelectContainer" >\n' +
            '       <div class="ngFooterTotalItems" ng-class="{\'ngNoMultiSelect\': !multiSelect}" >\n' +
            '           <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span>' +
            '           <span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} ' +
            '           {{totalFilteredItemsLength()}})</span>\n' +
            '       </div>\n' +
            '       <div class="ngFooterSelectedItems" ng-show="multiSelect">\n' +
            '           <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>\n' +
            '       </div>\n' +
            '   </div>\n' +
            '   <div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="enablePaging" ' +
            '   ng-class="{\'ngNoMultiSelect\': !multiSelect}">\n' +
            '       <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">\n' +
            '           <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span>\n' +
            '           <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" >\n' +
            '               <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option>\n' +
            '           </select>\n' +
            '       </div>\n' +
            '       <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" ' +
            '       style="float: left; min-width: 135px;">\n' +
            '           <button type="button" class="ngPagerButton" ng-click="pageToFirst()" ' +
            '           ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}">' +
            '           <div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>\n' +

            '           <button type="button" class="ngPagerButton" ng-click="pageBackward()" ' +
            '           ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div ' +
            '           class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>\n' +

            '           <label style="vertical-align: top; font-weight: inherit;">{{pagingOptions.currentPage}} to {{totalPages}} of {{maxRows()}}</label>\n' +

            '           <button type="button" class="ngPagerButton" ng-click="pageForward()" ' +
            '           ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div ' +
            '           class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>\n' +

            '           <button type="button" class="ngPagerButton" ng-click="pageToLast()" ' +
            '           ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}">' +
            '           <div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>\n' +
            '       </div>\n' +
            '   </div>\n' +
            '</div>\n';
    };