angular-ui-bootstrap分页指令问题

Posted 2020-06-17

html

<div class="pull-right">
  <pagination 
    total-items="pagination.totalcount"
    items-per-page="pagination.pagesize"
    max-size="5"
    ng-model="pagination.currentpage"
    class="pagination-sm m-t-none m-b"
    boundary-links="true"
    rotate="false"></pagination>
</div>

 

js

$scope.pagination = {
      pagesize: 12,
      totalcount: -1,
      currentpage: 1
    };

var search = function () {
// 每次查询前重置总记录数，会导致分页无效，点击任何分页或下一页会去查询相应页的数据，但随后当前页currentpage会被重置为1
// 解决办法：
// 1. 不重置总记录数
// 2. 页面中使用ng-if或ng-show控制只有当totalcount>pagesize时才显示分页按钮

// $scope.pagination.totalcount = 0; prdListService.getPrds({ cur_page: $scope.pagination.currentpage, ret_rows: $scope.pagination.pagesize }).then(function (data) { if (data && data[0]) { $scope.prds = data[0]; if (data[1]) { $scope.pagination.totalcount = data[1]; } } else { $scope.prds = []; $scope.pagination.totalcount = 0; $scope.pagination.totalpage = 0; } }); }; $scope.$watch("pagination.currentpage", function () { if ($scope.pagination.currentpage <= 1) return; search(); });