angular-utils-pagination 使用案例

angular-utils-pagination是基于angular,bootstrap,jquery的一个分页插件，详细介绍以及使用方法参照：

Git:https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

１：使用bower安装

[email protected]:app01$ bower install angular-utils-pagination --save

２：界面

３：控制器

tbody    tr(dir-paginate="a in adviceList | itemsPerPage:pageSize "  current-page="currentPage" total-items="totalItems")      td(style="vertical-align:middle") {{pageSize*(currentPage-1)+$index+1}}      td(style="vertical-align:middle") {{a.nsrsbh}}      td(style="vertical-align:middle") {{a.nsrmc}}      td(style="vertical-align:middle") {{a.bjsjh}}      td(style="vertical-align:middle") {{a.type}}      td(style="vertical-align:middle") {{a.version}}      td(style="vertical-align:middle") {{a.content}}      td(style="vertical-align:middle") {{a.date | getLocalTimeFilter}}.text-center  dir-pagination-controls(boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)")

//分页参数
    $scope.currentPage = 1;
    $scope.pageSize = 2;
    $scope.totalItems = 0;

    $scope.adviceList = [];

    /**
     * 获取意见反馈列表
     */
    $scope.getAdviceList = function(){
      $http.get(‘/api/advices/‘+$scope.currentPage).success(function(result) {
        $scope.adviceList = result.advices;
        $scope.totalItems = result.totalItems;

      }).error(function(){
        alert("网络错误");
      });
    };

    /**
     * 翻页操作
     * @param newPageNumber
     */
    $scope.pageChangeHandler = function(newPageNumber){
      $scope.getAdviceList();
    };

４：服务端

// Get list of advices
exports.index = function(req, res) {
  var pageSize = 2;
  var currentPage = req.params.currentPage;

  var start = (currentPage-1)*pageSize;

  Advice.find({active:true}).skip(start).limit(pageSize).exec(function (err, advices) {
    if(err) { return handleError(res, err); }

    Advice.count({active:true},function(err,totalItems){
      if(err) { return handleError(res, err); }
      return res.json(200, {advices:advices,totalItems:totalItems});
    });

  });
};