Angularjs：即使在按下页面按钮后，dir-pagination-controls也不显示下一页

Question

I've been trying to incorporate dir-pagination-controls, but can't work display the page based on the chosen page.

<div ng-controller="TableController as tc">
    <table>
        <tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
            <tr ng-click="tc.showOrderDetail(order.id)">
                <td ng-bind="order.id"></td>
                <!-- Simliar lines are here -->
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls 
       boundary-links="true" 
       on-page-change="tc.pageChangeHandler(newPageNumber)" 
       template-url="dirPagination.tpl.html">
    </dir-pagination-controls>
</div>

This table shows what I expect. However, the resulting pagination controller doesn't show the next page when I press any of its buttons.

Here is a relevant part of the script.

angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){

    var instance = this;

    this.orders = [];
    $http({
        //works fine
    }).then(function (response) {
        instance.orders = response.data;
        instance.totalOrders = instance.orders.length;
        //The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
    });

    this.pageChangeHandler = function(num) {
        console.log('going to page ' + num);
    };

    this.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

UPDATE The pageChangeHandler shows which button was pressed, but the page doesn't change. (Everything else is fine.)

This code is based on the official document and its demo,but I can't find what is actually wrong.

I'd appreciate if you give any advice.

Answer 1

The solution is to remove total-items from your dir-paginate directive. Here is a plunker with the simple example.

The total-items attribute is used when you do async calls to get each page items. So, first async call you get items for first page, and when you change the page you are supposed to get from the server the items for the corresponding page. The total-items tell the pagination directive how many pages you have in total, so it knows how to build the element.

If you want an async call for each page, you use total-items and you implement pageChanged where you do another async call.

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}