码迷,mamicode.com
首页 > 其他好文 > 详细

angular-utils-pagination 使用案例

时间:2015-08-15 18:03:57      阅读:503      评论:0      收藏:0      [点我收藏+]

标签:

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

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

1:使用bower安装

y@y:app01$ bower install angular-utils-pagination --save

2:界面

3:控制器
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();
    };

4:服务端

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

  });
};

 

angular-utils-pagination 使用案例

标签:

原文地址:http://www.cnblogs.com/yshyee/p/4732694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!