Angular简易分页设计

时间：2017-04-23 18:13:00 阅读：195 评论：0 收藏：0 [点我收藏+]

技术分享　　

　　之前网站的后台管理为了图快，把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
            }
        }