AngularJs實現表格分頁

 當頁面列表數據過多時，我們經常會收到將列表內容分頁的需求，列表內容分頁一般會有兩種做法：

　　1、不需要后台配合，前台一次性拿完所有數據，然后進行分頁展示；這種方式只是為了界面上對用戶更友好，並沒有實際提升頁面的效率（數據量過大時頁面加載壓力比較大）

　　2、需要后台配合，后台對改數據做分頁處理，頁面每次只請求需要展示的該頁面的數據，換頁時需要二次請求，這種方式是比較推薦的

 本文主要來講AngularJs分頁的實現，所以采用第一種做法了解分頁做法，不需要后台做數據分頁上的支持

 下面是AngularJs表格分頁的html代碼

　　　　　　　<table>
                <thead>
                　　<tr>
                    　　<th>序號</th>
                    　　<th>名稱</th>
                　　</tr>
                </thead>
                <tbody>
                　　<tr ng-repeat="item in items">
                   　　<td>{{$index+1}}</td>
                    　　<td>{{item.name}}</td>
                　　</tr>
                </tbody>
            </table>
            <div class="row">
                <div class="pull-right">
                    <nav>
                        <ul class="pagination">
                            <li>
                                <a ng-click="Previous()" role="button">
                                    <span role="button">上一頁</span>
                                </a>
                            </li>
                            <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" role="button">
                                <a ng-click="selectPage(page)" >{{ page }}</a>
                            </li>
                            <li>
                                <a ng-click="Next()" role="button">
                                    <span role="button">下一頁</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

 代碼中首先需要有一個表格結構table，這個table與正常table的建立只有一點區別，就是數據源items是經過分頁處理后的

 然后再下面一個div主要就是換頁的支持，包含上一頁，下一頁，選取固定頁；當然頁面中也可以讓用戶自己決定分頁的大小

        $scope.pageSize=20;　　//分頁大小，可以隨意更改  2         $scope.initPageSort=function(item){
            $scope.data = item;
            $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分頁數
            $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
            $scope.pageList = [];
            $scope.selPage = 1;
            //設置表格數據源(分頁)
            $scope.setData = function () {
                $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通過當前頁數篩選出表格當前顯示數據
            };
            $scope.items = $scope.data.slice(0, $scope.pageSize);
            //分頁要repeat的數組
            for (var i = 0; i < $scope.newPages; i++) {
                $scope.pageList.push(i + 1);
            }
            //打印當前選中頁索引
            $scope.selectPage = function (page) {
                //不能小於1大於最大
                if (page < 1 || page > $scope.pages) return;
                //最多顯示分頁數5
                if (page > 2) {
                    //因為只顯示5個頁數，大於2頁開始分頁轉換
                    var newpageList = [];
                    for (var i = (page - 3); i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)); i++) {
                        newpageList.push(i + 1);
                    }
                    $scope.pageList = newpageList;
                }
                $scope.selPage = page;
                $scope.setData();
                $scope.isActivePage(page);
                //console.log("選擇的頁：" + page);
            }
        };
        //設置當前選中頁樣式
        $scope.isActivePage = function (page) {
            return $scope.selPage == page;
        };
        //上一頁
        $scope.Previous = function () {
            $scope.selectPage($scope.selPage - 1);
        };
        //下一頁
        $scope.Next = function () {
            $scope.selectPage($scope.selPage + 1);
        };