Angular简易分页设计(一)：基本功能实现

　　

　　（首先声明本文来自博客园本人原创，转载请说明出处。欢迎关注：http://www.cnblogs.com/mazhaokeng/p/6752990.html）

　　之前网站的后台管理为了图快，把Jquery写的前台页面使用的分页插件，套到Angular中使用。现在后台的小编说这东西有时候翻页失败，而插件代码十分复杂，无法定位bug进行修改，也无法保证修改后不会出现别的bug，干脆舍弃插件，自己写一个。

　　设计时，我大概看了一下插件的代码，基本思路就是通过数据处理判断，然后通过字符串拼接，生成新的dom元素。而我们需要的分页是在Angular中运行，应当尽量避免这种做法。怎么简单怎么来，我们固定一次只显示7个页码，不需要动态增删元素。

  <ul>
        <li ng-repeat="num in pageShowList">
            <a href="javascript:void(0)">
                {{num}}
            </a>
        </li>
  </ul>

　　pageShowList是要显示的7个页码，元素是固定的，但里面的数字会变化。我们把这7个页码设计成一个“展示窗口”，用于展示“全部页码”的一部分。在页码被点击时会移动，然后把点击的页码放到中间，这就是我们想要的效果。假如我们总共有12页，初始化时我们显示的是1-7页。

　　总页数： 　  1   2   3   4   5   6   7   8   9   10   11   12

　　展示窗口：　1   2   3   4   5   6   7

　　这总页数和展示都需要生成一个数组。首先总页数生成很简单，从1开始到最大页数位置push数字进去就行了。

        /*  设定最大页数
         * */
        function setPageMax(num) {
            maxPage = num;　　　　　　　　　　　　//保存最大页数
            for (var i = 1; i <= num; i++) {
                pageList.push(i);　　　　　　　　//生成数组
            }
            $scope.pageShowList = pageList.slice(0, 7);  //显示窗口数组，只显总页数中的其中7个
        }

　　这样就生成了我们需要的页码。接下来是点击时窗口的移动。

　　

　　我们为页码的a标签绑定一个点击事件，ng-click="pageGo(num)"，num就是窗口中的数字。点击事件pageGo需要调用下面的代码重新排列显示的页码：

　　　　　/*  重新设置页码
         * */
       function resetPageOrder(num) {
　　　　　  if( num > 4 ){
　　　　　　　　　$scope.pageShowList = [　　//重新排列窗口的
                    num - 3,
                    num - 2,
                    num - 1,
                    num,
                    num + 1,
                    num + 2,
                    num + 3
                ];
　　　　　　}else{
　　　　　　　　$scope.pageShowList = pageList.slice(0, 7);　　//显示1-7
　　　　　　}
　　　　}

　　思路很简单，就是点击不超过显示窗口中点的数字1-4时，窗口不移动（没有小于1的页数），而点击大于4的数字时，比如5，我们就把5放窗口中间，它的分别两边就是2、3、4和6、7、8。我们依次递增点击页码，窗口就往右移动了。

　　总页数： 　  1   2   3   4   5   6   7   8   9   10   11   12

　　展示窗口：　     2   3   4   5   6   7   8

　　展示窗口：　          3   4   5   6   7   8   9

　　

　　然后我们发现，当点击页码越来越大，很快窗口右边就会超出总页数。这时我们只要把超出的部分去除掉就可以了。对展示窗口数组的处理就是把大于总页数12的元素pop掉。

　　总页数： 　  1   2   3   4   5   6   7   8   9   10   11   12

　　展示窗口：　                                  8   9   10   11   12   13

　　展示窗口：　                                       9   10   11   12   13  14

        /*  重新设置页码
         * */
        function resetPageOrder(num) {if (num > 4 ) {
                $scope.pageShowList = [　　
                    num - 3,
                    num - 2,
                    num - 1,
                    num,
                    num + 1,
                    num + 2,
                    num + 3
                ];
                if ( num > maxPage - 3 ){　　　　　　//窗口中点右边长度为3，如果超出了总页数
                    for ( var i = 0; i < 3-(maxPage - num); i ++ ){　　//根据超出长度的个数，把显示窗口数组右边pop掉。
                        $scope.pageShowList.pop();
                    }
                }
            } else{  //
                $scope.pageShowList = pageList.slice(0, 7);  //1-7
            }
        }

　　这样就得到我们想要的效果：

　　

　　

　　最后总结一下，程序的思想就是，把要全部的页码生成出来，再制作一个与html绑定的展示窗口显示全部页码的一部分，点击时把点击的页码放在窗口的中间。窗口移动的过程中会遇到下面的三种情况：

　　（1）点击页码小于窗口中点，此时窗口不移动。

　　（2）点击页码大于窗口中点，窗口往右移动。

　　（3）窗口右边超出总页数，此时需要把超出部分剔除掉。

　　经过进一步的美化加工，就可以达到下面的效果了。我认为我们不能一遇上比较困难的逻辑时，就想要找各种插件。能不能自己思考一下，用简单的方法实现，再在此基础上进行加强，这才是程序员的核心能力。想要成为大牛，肯定不能只停留在使用轮子的阶段，轮子太复杂，我们就造一个小的用着先嘛。

　　

　　最终代码整理：

//变量
            var pageList = [];
            $scope.page = 1;    //初始默认为第一页
            $scope.pageShowList = [];    //最大显示7个格子

            /*  监听最大页数，如果页数变化，重新生成页数数组
            * */
            var watch = $scope.$watch('maxPage', function (newValue, oldValue, scope) {
                pageList = [];
                for (var i = 1; i <= newValue; i++) {   //一个个压入页码
                    pageList.push(i);
                }
                resetPageOrder($scope.page);
            });

            /*  直接跳页
             * */
            $scope.pageGo = function (num) {
                $scope.page = num;
                resetPageOrder($scope.page);
            };

            /*  上一页
             * */
            $scope.pagePre = function () {
                if( $scope.page > 1){
                    $scope.page --;
                    resetPageOrder($scope.page);
                }
            };

            /*  下一页
             * */
            $scope.pageNext = function () {
                if ( $scope.page < $scope.maxPage ){
                    $scope.page ++;
                    resetPageOrder($scope.page);
                }
            };

            /*  重新设置页码
            *   @param num当前页码
             * */
            function resetPageOrder(num) {
                $scope.clickPage = num; //变色
                if (num > 4 ) {
                    $scope.pageShowList = [
                        num - 3,
                        num - 2,
                        num - 1,
                        num,
                        num + 1,
                        num + 2,
                        num + 3
                    ];
                    if ( num > $scope.maxPage - 3 ){    //去除多出的页数
                        for ( var i = 0; i < 3-($scope.maxPage - num); i ++ ){
                            $scope.pageShowList.pop();
                        }
                    }
                } else{  //点击小于4的页数
                    $scope.pageShowList = pageList.slice(0, 7);  //只显示最大7个
                }
            }