ui-grid分页不起作用

时间:2017-11-29 14:31:16

标签: angularjs angular-ui-grid ui-grid

我刚刚开始将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

1 个答案:

答案 0 :(得分:0)

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