如何以角度显示 12 个结果中的 1 到 10 个

Question

我想在表格底部以角度显示分页细节。 我试试这些代码：

<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>

如何在页面和搜索页面中获得“显示 72 个结果中的 1 到 10 个”？

Answer 1

这里有一个想法，你可以如何做到这一点。它对我有用，我正在使用 ng-grid-2.0.8.js

从服务器接收数据时 - 计算总共有多少页

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

然后确保显示页脚并使用自定义模板，如下所示：

$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';
    };

Answer 2

UI Grid 前身为 ng-grid，纯粹基于 angularjs 库构建，涵盖了所有核心网格功能，如排序、分页、过滤、导出等。

你可以试试 ui-grid