angularjs分页

1. 运行结果如下

   

    

2. 前端代码

    <style>
           /*设置tablebody可以滚动*/
           .bz_table_grid{
               border: 1px solid #ccc;
           }
           .bz_table_grid thead {
               display: block; }
           .bz_table_grid thead tr {
               display: table;
               width: 100%;
               table-layout: fixed; }
           .bz_table_grid tbody {
               display: block; }
           .bz_table_grid tbody tr {
               display: table;
               width: 100%;
               table-layout: fixed; }
           /*隐藏滚动条*/
           .bz_table_grid>tbody::-webkit-scrollbar{
               display: none;
           }
       </style>    
   
   <div style="width: 800px;height: 400px;margin: 50px auto">
           <table class="table bz_table_grid">
               <thead>
                   <tr>
                       <th>序号</th>
                       <th>名称</th>
                   </tr>
               </thead>
               <tbody style="height: 100px;overflow: scroll">
                   <tr ng-repeat="item in configs.selectdata">
                       <td>{{$index}}</td>
                       <td>{{item}}</td>
                   </tr>
               </tbody>
           </table>
           <div pagination config="configs" style="z-index:-10;margin-top:-15px"></div>
       </div>

   这里写了一个table，给表身写了一个样式  .bz_table_grid，设置高度可以实现表身的滚动

3. 引入指令

   app.directive('pagination',function(){
       return{
           restrict: 'A',
           templateUrl: 'pagination/pagination.html',
           replace: true,
           scope: {
               config: '=',
           },
           link:function (scope) {
               //多少页面为一组
               var pageitemcount=10;
               if(scope.config.pageitemcount!=undefined){
                   pageitemcount=scope.config.pageitemcount;
               }
               //第几组页面数据被选中
               var selectpagelistindex=0;
               if(scope.config.selectpagelistindex!=undefined){
                   selectpagelistindex=scope.config.selectpagelistindex;
               }
               //设置分页居中
               // setTimeout(function () {
               //     $("#pagination_box").width($("#pagination")[0].parentNode.parentNode.offsetWidth+"px ");
               // },100);
               //每页数量
               scope.pagegroup = [{ "pagenum": 10 }, { "pagenum": 20 }, { "pagenum": 30 },{ "pagenum": 50 }, { "pagenum": 100 }];
               //初始化每页数量
               scope.selectedpage = scope.pagegroup[2];
               //每页数量
               var datacount = 30;
               //总页数
               scope.config.pagecount = 0;
               ///所有数据列表
               // scope.config.datalist = [];
               //把数据分组
               scope.config.datagroup = 0;
               //选中数据页的序号
               scope.config.selectpageindex = 1;
               //选中的数据
               scope.config.selectdata = [];
               //设置的多少(10)个页面为一组的集合
               scope.config.pagelistgroup = [];
               //被选中的(10)个页面
               scope.config.selectpagelist = [];
   
               //所有pageitemcount个页面的分组
               scope.config.pagelist =[];
               //所有条数
               scope.config.count=scope.config.datalist.length;
   
   
               scope.data = {};
               scope.getpageshow = function (pageindex) {
                   if (pageindex <= scope.config.datagroup.length) {
                       return true;
                   } else {
                       return false;
                   }
               }
               scope.getselectdata = function (index) {
                   scope.config.selectpageindex = index;
                   scope.config.selectdata = scope.config.datagroup[index - 1];
               }
               scope.getfirstpage = function () {
                   scope.config.selectpageindex = 1;
                   selectpagelistindex=0;
                   scope.config.selectpagelist=scope.config.pagelistgroup[0];
                   scope.config.selectdata = scope.config.datagroup[scope.config.selectpageindex - 1];
               }
               scope.getlastpage = function () {
                   selectpagelistindex=scope.config.pagelistgroup.length-1;
                   scope.config.selectpageindex = scope.config.pagecount;
                   scope.config.selectpagelist=scope.config.pagelistgroup[scope.config.pagelistgroup.length-1];
                   scope.config.selectdata = scope.config.datagroup[scope.config.selectpageindex - 1];
               }
               scope.getbehindpage = function () {
                   if (selectpagelistindex < scope.config.pagelistgroup.length - 1) {
                       selectpagelistindex = selectpagelistindex + 1;
                       scope.config.selectpagelist = scope.config.pagelistgroup[selectpagelistindex];
                   }
   
               }
               scope.getbforepage = function () {
                   if (selectpagelistindex > 0) {
                       selectpagelistindex = selectpagelistindex - 1;
                       scope.config.selectpagelist = scope.config.pagelistgroup[selectpagelistindex];
                   }
               }
               scope.$watch("config.datalist", function (nval, oval) {
                   scope.config.count=scope.config.datalist.length;
                   if (nval != oval) {
                       var oldpage = scope.config.pagecount
                       scope.config.pagecount = Math.ceil(scope.config.datalist.length / datacount);
                       if (oldpage != scope.config.pagecount) {
                           scope.config.selectpageindex = 1;
                       }
                       scope.config.datagroup = [];
                       var index = 0;
                       for (var i = 0; i <= scope.config.datalist.length; i++) {
                           var group = [];
                           if (i != 0) {
                               i--;
                           }
                           for (var j = 0; j < datacount && i < scope.config.datalist.length; j++, i++) {
                               group.push(scope.config.datalist[i]);
                           }
                           scope.config.datagroup.push(group);
                       }
                       if (scope.config.selectpageindex == 0 || scope.config.selectpageindex == "") {
                           scope.config.selectpageindex = 1;
                       }
                       scope.config.selectdata = scope.config.datagroup[scope.config.selectpageindex - 1];
                       var page = "";
                       scope.config.pagelist = [];
                       for (var i = 0; i < scope.config.pagecount; i++) {
                           page = { pageindex: i + 1 };
                           scope.config.pagelist.push(page);
                       }
                       scope.config.pagelistgroup = [];
                       for (var i = 0; i <= scope.config.pagecount; i++) {
                           var group = [];
                           if (i != 0) {
                               i--;
                           }
                           for (var j = 0; j < pageitemcount && i < scope.config.pagecount; j++, i++) {
                               group.push(scope.config.pagelist[i]);
                           }
                           scope.config.pagelistgroup.push(group);
                       }
                       scope.config.selectpagelist = scope.config.pagelistgroup[0];
                       scope.data = scope.config;
                   }
               })
               scope.$watch("selectedpage", function (nval, oval) {
                   scope.config.count=scope.config.datalist.length;
                   datacount = scope.selectedpage.pagenum;
                   var oldpage = scope.config.pagecount
                   scope.config.pagecount = Math.ceil(scope.config.datalist.length / datacount);
                   if (oldpage != scope.config.pagecount) {
                       scope.config.selectpageindex = 1;
                   }
                   scope.config.datagroup = [];
                   var index = 0;
                   for (var i = 0; i <= scope.config.datalist.length; i++) {
                       var group = [];
                       if (i != 0) {
                           i--;
                       }
                       for (var j = 0; j < datacount && i < scope.config.datalist.length; j++, i++) {
                           group.push(scope.config.datalist[i]);
                       }
                       scope.config.datagroup.push(group);
                   }
                   if (scope.config.selectpageindex == 0 || scope.config.selectpageindex == "") {
                       scope.config.selectpageindex = 1;
                   }
                   scope.config.selectdata = scope.config.datagroup[scope.config.selectpageindex - 1];
                   var page = "";
                   scope.config.pagelist = [];
                   for (var i = 0; i < scope.config.pagecount; i++) {
                       page = { pageindex: i + 1 };
                       scope.config.pagelist.push(page);
                   }
                   scope.config.pagelistgroup = [];
                   for (var i = 0; i <= scope.config.pagecount; i++) {
                       var group = [];
                       if (i != 0) {
                           i--;
                       }
                       for (var j = 0; j < pageitemcount && i < scope.config.pagecount; j++, i++) {
                           group.push(scope.config.pagelist[i]);
                       }
                       scope.config.pagelistgroup.push(group);
                   }
                   scope.config.selectpagelist = scope.config.pagelistgroup[0];
                   scope.data = scope.config;
               })
           }
       }
   })
   

   指令的模板

   <div id="pagination_box" style="height:40px;border:0px solid #fff;border-radius:5px;text-align:center;position: inherit;width: 100%">
       <ul class="pagination" id="pagination">
           <li class="pagination_list"><a href="" ng-click="getfirstpage()">第一页</a></li>
           <li class="pagination_list"><a href="" ng-click="getbforepage()">&lt;&lt;</a></li>
           <li class="pagination_list" ng-repeat="item in data.selectpagelist" >
               <a href="" ng-show="getpageshow(item.pageindex)" ng-click="getselectdata(item.pageindex)" ng-class="{'selectpagebg':item.pageindex===config.selectpageindex}">{{item.pageindex}}</a>
           </li>
           <li class="pagination_list"><a href="" ng-click="getbehindpage()">&gt;&gt;</a></li>
           <li class="pagination_list"><a href="" ng-click="getlastpage()">最后一页</a></li>
           <li class="pagination_list"><a>第&nbsp;{{data.selectpageindex}}/{{data.pagecount}}&nbsp;页,{{config.count}}&nbsp;条</a></li>
           <!--<li class="pagination_list"><a>当前第&nbsp;{{data.selectpageindex}}&nbsp;页</a></li>-->
           <li class="pagination_list" style="border:0px solid #ddd!important;padding:6px 12px;color:#428bca;height:33px;line-height:33px;font-size: 14px!important;">
               每页&nbsp;
               <select style="width: 60px; height: 31px;margin:0;padding-left:3px;font-size: 14px!important;" id="selectedroute" ng-init="selectedpage" ng-model="selectedpage" ng-options="x.pagenum for x in pagegroup"></select>
               &nbsp;行
           </li>
       </ul>
   </div>
   

   指令的样式

   .selectpagebg{
       background-color: #428BCD!important;
       color: #ffffff!important;
   }
   .pagination_list>a{
       padding: 6px 8px !important;
   }
   

   这样简单的angularjs分页效果就实现了