ui-grid分页不起作用答案

【问题标题】：ui-grid Pagination not workingui-grid分页不起作用
【发布时间】：2017-11-30 05:09:07
【问题描述】：

我刚刚开始在我的应用程序中实现 ui-grid。

我一直在关注official ui-grid documentation 的分页功能，但到目前为止我还不能让它完全发挥作用。

虽然它显示了分页控件，但它并没有“尊重”我在代码中输入的参数，如下所示：

$scope.setGrid = function () {

    $scope.gridOptions = {
        enablePagination: true,
        pageSize: 10,
        paginationPageSize: 10,
        paginationPageSizes: [25, 50, 75],
        enableHorizontalScrollbar: false,
        enablePaginationControls: true,
        columnDefs: [
            { name: 'name', field: 'name', type:'object', enableCellEdit: false },
            { name: 'lastName', field: 'last_name', type: 'object', enableCellEdit: false },
            { name: 'email', field: 'email', type: 'object', enableCellEdit: false },
            { name: 'creationDate', field: 'created', type: 'object', enableCellEdit: false, cellFilter: 'date:"dd/MM/yyyy HH:mm:ss"'},
            { name: 'userActive', enableCellEdit: false, field: 'active', type: 'boolean'}

        ],
        data: $scope.users
    }
}

在 HTML 视图中：

<div class="row">
  <div class="panel-body">
    <rd-widget-body classes="medium no-padding">
        <div id="grid1" ui-grid-pagination ui-grid="gridOptions" class="grid"></div>
    </rd-widget-body>
  </div>
</div>

在我的模块块中：

angular.module('RDash', [   
 'ui.bootstrap', 
 'ui.router', 
 'ngCookies',
 'ngRoute',
 'ngResource',
 'doowb.angular-pusher',
 'xeditable',
 'ui.grid',
 'ui.grid.edit',
 'ui.grid.pagination',
 'ui.grid.resizeColumns', 
 'ui.grid.selection'
 ]);

出现的问题是，在我的网格中，虽然已配置并接受分页，但分页控件被禁用，并且不接受已配置的 pageSize 和 paginationPagesSize。

它显示的是我的数据集中的所有项目（到目前为止，此测试有 35 个项目），并且在每页项目数下拉列表中显示 250|500|1000，这似乎是默认配置。

似乎我忘记调用某种方法来“启动”整个事情，但我不确定。

我确实找到了很多分页的例子，such as this one，它们都很简单，但我似乎仍然无法让它工作。分页，虽然正在显示控件，但它已完全禁用，并且没有采用我设置的参数。

我的 ui-grid 版本是 v4.0.11 (2017-11-20)，取自 CHANGELOG.md

【问题讨论】：

标签： angularjs angular-ui-grid ui-grid

【解决方案1】：

我发现了问题所在。所有参数都是正确的，问题是在代码实际将数据集绑定到 $scope.gridOptions.data 之前，我的代码中的方法 $scope.setGrid() 被调用。我更改了运行时，使其仅在实际绑定发生并且一切开始工作时才被调用。

【讨论】：