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年的了；现在上传下最新版本的 样例吧；其实就是官网上的例子，鉴于某些宝宝不会FQ看，就拿下来了；

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

下载本地打开就可以了；2017-01-05