- <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回调方法:
具体分页指令代码
效果图:
- 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);// 回调
- });
- }
- }
- })
- });
- }
- }
- }]);