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

文档详情

angularjs分页教程

angularjs jquery

doramart 2015-07-02 11:37:52 技巧229228

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("获取分页信息失败")
    }

}