Question

我正在使用外部分页与 ui-grid 和 angularjs 。

此刻服务器已经模拟 70项，但我不知道服务器中的项目数。 pageSize设置为50 。

所以它应该有2个页面（一个有50个项目，一个有20个）。

下一页按钮在第二页上未禁用，但在网格中没有要显示的项目的情况下在第三页上显示。

我希望在第二页禁用它！

链接到插件：http://plnkr.co/edit/OuM8lN0R06Xudn1frLax?p=preview

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.pagination']);

app.service('foo', ['$q', function ($q) {
    var items = [];
    for (var i = 0; i < 70; i++) {
        items.push({
            "firstName": "firstName" + i,
            "lastName": "lastName" + i,
            "company": "company" + i,
            "employed": i % 4 === 0
        });
    }

    this.bar = function (page, pageSize) {
        var deferred = $q.defer();

        var start = (page - 1) * pageSize;
        deferred.resolve(items.slice(start, start + pageSize));

        return deferred.promise;
    };

    return this;
}]);

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', 'foo', function ($scope, $http, $log, $timeout, uiGridConstants, foo) {
    var paginationOptions = {
        pageNumber: 1,
        pageSize: 50,
        sort: null
    };

    $scope.selectedIds = [];

    $scope.gridOptions = getOptions();

    function getOptions() {
        return {
            enableHorizontalScrollbar: 0,
            enableVerticalScrollbar: 2,

            enableRowSelection: true,
            enableFullRowSelection: true,
            multiSelect: true,

            paginationPageSizes: [50, 100],
            paginationPageSize: 50,
            useExternalPagination: true,

            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
                getPage(1, 50);

                gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                    paginationOptions.pageNumber = newPage;
                    paginationOptions.pageSize = pageSize;
                    getPage(newPage, pageSize);
                });
            }
        };
    }

    function getPage(page, pageSize) {
        foo.bar(page, pageSize)
            .then(function (data) {
                $scope.gridOptions.data = data;
                $scope.gridOptions.totalItems = undefined;
            });
    }

    getPage(1, 50);
}]);

的index.html

<!doctype html>
<html ng-app="app">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

    <div ng-controller="MainCtrl">
        <div class="grid" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection></div>
    </div>


    <script src="app.js"></script>
</body>

</html>

Answer 1

在案例70中，你必须给出gridOptions.totalItems的值。这就是ui-grid如何计算显示的页数。我已更新您的plnkr以反映更改。

Answer 2

我已经使用 getPage（page，pageSize）方法中的简单更改修复了它。

以下是该方法的代码：

function getPage(page, pageSize) {
    foo.bar(page, pageSize)
        .then(function (data) {
            $scope.gridOptions.data = data;
            $scope.gridOptions.totalItems = data.length === pageSize ? undefined : (page - 1) * pageSize + data.length;
        });
}

这是工作plunk

在uiGrid上禁用下一页

2 个答案: