<table style="width:100%"> <tr> <td>总共:<span style="color:#12bdce;font-weight: bold;">{{total_pages}}</span>页<span style="color:#12bdce;font-weight: bold;">{{total}}</span>条</td> <td style="text-align:right;"> <div layer-pages id="page_bar" data-options="url: 'busMaintenanceItem/query.do',callback: 'getPageDataList',pageColor: '#12bdce',pageSize: '10',groups:'3',isSkip: false" style="margin-right: 0px;"></div> </td> </tr> </table>
js回调方法:
//获得当前页面数据信息(用于分页指令回调) $scope.getPageDataList = function (pageInfo){ $scope.maintenanceItemList = pageInfo.data_list;// 数据 $scope.total = pageInfo.total;// 总条数 $scope.total_pages = pageInfo.total_pages;// 总条数 }
具体分页指令代码
App.directive("layerPages",['$rootScope','$compile','Page',function($rootScope,$compile,Page) { return { restrict:'AE',link: function (scope,elem,attrs) { var page_id = attrs.id; var options =eval('[{' + (attrs.options || '') + '}]')[0] var url = options.url;// 数据接口 var page_color =options.pageColor;// 颜色 var page_groups = options.groups;// 连续分页数 var page_size = options.pageSize;// 每页显示条数 var page_is_skip = options.isSkip;// 是否开启跳页 var callbackFun = scope.$eval(options.callback);// 回调函数 if(!callbackFun || !typeof(callbackFun)=='function'){ return; } var page_index = 0; var param = {}; param._pageIndex = page_index; param._pageSize = page_size; Page.ajaxPost(url,param,function (resp) { var data_list = resp.data.rows; var total = resp.data.total;// 总页数 var total_pages = Math.ceil(total % page_size == 0? total / pageSize: total / page_size); var pageInfo = {}; pageInfo.data_list = data_list; pageInfo.total = total; pageInfo.total_pages = total_pages; callbackFun(pageInfo); // 回调 laypage({ cont : page_id,pages : total_pages,// 得到总页数 skin : page_color,skip : page_is_skip,// 是否开启跳页 prev : false,// 若不显示,设置false即可 next : false,// 若不显示,设置false即可 groups : page_groups,// 连续分页数 curr: 1,// 初始化当前页 jump : function(obj,first) {// 触发分页后的回调 /*obj是一个object类型。包括了分页的所有配置信息。 first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。*/ if(!first){ param._pageIndex = obj.curr - 1; Page.ajaxPost(url,function(resp) { var data_list = resp.data.rows; pageInfo.data_list = data_list; callbackFun(pageInfo);// 回调 }); } } }) }); } } }]);效果图: