DoraCMS

您现在的位置是:首页>文档内容页

文档详情

angularjs分页教程

doramart 2015-07-02 11:37:52 技巧228763
angularjs强大的双向绑定,以及对SEO的不友好…暂时让它只能在后台管理系统方面大展身手,而管理系统,一个很重要的组件就是分页了。angularjs实现分页也不是很难。

angularjs强大的双向绑定,以及对SEO的不友好…暂时让它只能在后台管理系统方面大展身手,而管理系统,一个很重要的组件就是分页了。angularjs实现分页也不是很难。


服务端代码:

getPaginationResult : function(obj,req,res,q){// 通用查询,带分页,注意参数传递格式
        var str = req.query.search, page = parseInt(req.query.page);
        var limit = parseInt(req.query.limit);
        if (!page) page = 1;
        if (!limit) limit = 10;
        var order = req.query.order;
        var sq = {}, Str, A = 'problemID', B = 'asc';
        if (order) {    //是否有排序请求
            Str = order.split('_');
            A = Str[0]; B = Str[1];
            sq[A] = B;    //关联数组增加查询条件,更加灵活,因为A是变量
        } else {
            sq.date = -1;    //默认排序查询条件
        }

        var startNum = (page - 1)*limit;
        var resultList = obj.find(q).sort(sq).skip(startNum).limit(limit).find();
        //        分页参数
        var pageInfo = {
            "totalItems" : obj.find(q).count(),
            "currentPage" : page,
            "limit" : limit,
            "startNum" : startNum +1
        };
        var datasInfo = {
            docs : resultList,
            pageInfo : pageInfo
        }

        return datasInfo;
    },

这里定义了一个取数据的方法,可以传递排序和搜索条件等参数,主要是通过向前端返回 pageInfo 数据来为分页做准备。


前端显示:

<div class="text-center">
            <ul class="pagination pagination-centered">
                <li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prevPage()">上一页</a></li>
                <li ng-repeat="page in pages" ng-class="{true:'active'}[currentPage==page]"><a href="javascript:void(0);" ng-click="loadPage(page)">{{ page }}</a></li>
                <li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="nextPage()">下一页</a></li>
            </ul>
        </div>

这里是分页的显示,


下面对分页做js操作,这里是用来angularjs:

angular.module("webApp",[])
            .controller("content",function($scope,$http) {

                $scope.currentPage = Number('<%=pageInfo.currentPage%>');

                $scope.totalItems = Number('<%=pageInfo.totalItems%>');

                $scope.limit = Number('<%=pageInfo.limit%>');

                $scope.startNum = Number('<%=pageInfo.startNum%>');

                $scope.totalPage = Math.ceil($scope.totalItems / $scope.limit);

                $scope.pages = [];

                var localUrl =  "/<%=cateInfo.defaultUrl%>___<%=cateInfo._id%>";

                initPagination($scope,$http,localUrl);

            })


下面是 initPagination方法

function initPagination($scope,$http,localUrl){
//        定义翻页动作
   $scope.loadPage = function(page){
       $scope.currentPage = page;
       window.location.href = localUrl + "-"+$scope.currentPage+".html";
   };

   $scope.nextPage = function () {
       if ($scope.currentPage < $scope.totalPage) {
           $scope.currentPage++;
           window.location.href = localUrl + "-"+$scope.currentPage+".html";
       }
   };

   $scope.prevPage = function () {
       if ($scope.currentPage > 1) {
           $scope.currentPage--;
           window.location.href = localUrl + "-"+$scope.currentPage+".html";
       }
   };

   if($scope.currentPage){
       if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {
           $scope.pages = [
                   $scope.currentPage - 1,
               $scope.currentPage,
                   $scope.currentPage + 1
           ];
       }
       else if ($scope.currentPage == 1 && $scope.totalPage == 1) {
           $scope.pages = [
               $scope.currentPage

           ];
       }
       else if ($scope.currentPage == 1 && $scope.totalPage > 1) {
           $scope.pages = [
               $scope.currentPage,
                   $scope.currentPage + 1
           ];
       } else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {
           $scope.pages = [
                   $scope.currentPage - 1,
               $scope.currentPage
           ];
       }
   }else{
       console.log("获取分页信息失败")
   }

}

不得不说,angularjs在某些方面确实比jquery要强大很多,在表单操作和后台数据显示等方面,非常方便,在此标记一下。更多关于 AngularJs的相关教程看这里 angularjs 相关文档

文章评论

取消回复
登录 参与评论

评论列表(