Disable next page on uiGrid

Question

I am using external pagination with ui-grid and angularjs.

The server has 70 items mocked at the moment, but I will not know the items count from the server. The pageSize is set to 50.

So it should have 2 pages (one with 50 items on it and one with 20).

The button for next page is NOT disabled on the second page but on the third one when there are no items in the grid to show.

I would like it disabled on the second page!

Link to the plunk: 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>

score 0 · Answer 1 · answered Mar 29 '17 at 17:45

0

You have to give the value if gridOptions.totalItems, in your case 70. This is how ui-grid figures out how many pages to show. I've updated your plnkr to reflect the changes.

answered Mar 29 '17 at 17:45

Guranjan Singh

734
2
7
24

I am aware that it can be handled with **gridOptions.totalServerItems**, but the thing is that I like to disable that button by force, because otherwise it will just wait for empty response. – Igor Dimchevski Mar 29 '17 at 21:15
After looking through the source code, it seems like setting `gridOptions.useCustomPagination` to true would achieve the desired results. ui-gird documentation suggests the following when setting `useCustomPagination` to true: "When true, handle the `paginationChanged` event and set `data`, `firstRowIndex`, `lastRowIndex`, and `totalItems`." – Guranjan Singh Mar 29 '17 at 21:44

score 0 · Accepted Answer · answered Mar 30 '17 at 07:37

I have fixed it using a simple change in the getPage(page, pageSize) method.

Here is the code for the method:

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;
        });
}

Here is the working plunk

Disable next page on uiGrid

2 Answers2