Angular+Angular-Ui實現分頁（代碼更加簡單，更加容易懂哦）

前面寫了個分頁，但是個人認為只能玩玩，實際業務上的話代碼太繁雜（筆者想走代碼、性能精簡化之路【不知道哪天才能成為高手~·YY一下無傷大雅】），邏輯上有點混亂。那么今天我們來看看另外一種只實現分頁沒有查詢的例子吧（要想查詢之后還分頁的，請再看看i我前面寫的那個分頁文章，結合這篇文章，相信你很快就能搞定！）。好了，先看效果：

 

采用了Angular-UI中的分頁組件，關於Angular-UI如何使用請移步這里https://angular-ui.github.io/bootstrap/中的bootstrap章節（其中ui-router等我也建議你多看看）

注意必須按照官網上引入相應的js和css才能生效，千萬不要忘記了。

 

HTML代碼如下：

<div class="">
    <table class="table">
        <thead class="hed">
        <tr>
            <th>省份1</th>
            <th>省份2</th>
            <th>省份3</th>
            <th>省份4</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="a in allitem[currentPage-1]">
            <td ng-bind="a.n"></td>
            <td ng-bind="a.s"></td>
            <td ng-bind="a.n"></td>
            <td ng-bind="a.s"></td>
        </tr>

        </tbody>

    </table>

</div>
<div class="">
    <pagination boundary-links="true" total-items="totalItems"
                ng-model="currentPage" class="pagination-sm embed-responsive-item"
                previous-text="上一頁"
                next-text="下一頁"
                first-text="首頁"
                last-text="尾頁"
                max-size="maxSize"
                rotate="false" num-pages="numPages">


    </pagination>
</div>

　　JS代碼如下：

$scope.currentPage =1;//初始當前頁
        $scope.maxSize = 3;//最多顯示3頁其他的用···代替
        $scope.allitem=[];//存放所有頁
        $http.get('./js/test').success(
            function (data) {
                $scope.addr=data.l;
                var num= $scope.addr.length;

                $scope.totalItems =num;//共有多少條數據

                for(var i=0;i<num;i+=10){
                    $scope.allitem.push($scope.addr.slice(i,i+10))
                }//此方法可以將一個數組分成多個數組並且放在了一個大數組里面，按每個數組10條數據【因為組件默認為10條數據一頁】存放，假如41條數據的話我們將分成5頁

               
            }
        );

　　

　　筆者Js文件夾下的test.json存放的是中國地址JSon數據源，用於測試。

================================================================================
PS:上述版本是15年的了；現在上傳下最新版本的 樣例吧；其實就是官網上的例子，鑒於某些寶寶不會翻牆看，就拿下來了；

http://files.cnblogs.com/files/wohenxion/page.rar

下載本地打開就可以了；2017-01-05