dsyo9700 2016-04-13 23:56
浏览 187
已采纳

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

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.

展开全部

  • 写回答

1条回答 默认 最新

  • doucuo1642 2016-04-14 00:44
    关注

    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
       });
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥100 二维码被拦截如何处理
  • ¥15 怎么解决LogIn.vue中多出来的div
  • ¥15 优博讯dt50巴枪怎么提取镜像
  • ¥30 在CodBlock上用c++语言运行
  • ¥15 求C6748 IIC EEPROM程序固化烧写算法
  • ¥50 关于#php#的问题,请各位专家解答!
  • ¥15 python 3.8.0版本,安装官方库ibm_db遇到问题,提示找不到ibm_db模块。如何解决?
  • ¥15 TMUXHS4412如何防止静电,
  • ¥30 Metashape软件中如何将建模后的图像中的植被与庄稼点云删除
  • ¥20 机械振动学课后习题求解答
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部