一个基于layer写的分页指令
<div lay-pages id="page_bar" data-options="url: 'notice/query.do',callback: 'getPageDataList',pageColor: '#12bdce',pageSize: '10',groups:'3',isSkip: false" style="margin-right: 250px;"></div>
js里面callback函数:
//获得当前页面数据信息(用于分页指令回调) $scope.getPageDataList = function (dataList){ $scope.noticeList = dataList; if($scope.noticeList.length > 0) { $scope.selectNotice = $scope.noticeList[0]; } }
指令代码:
App.directive("layPages",['$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 dataList = resp.data.rows; callbackFun(dataList); // 回调 var total = resp.data.total;// 总页数 var total_pages = total % page_size == 0? total / pageSize: total / page_size + 1; 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 dataList = resp.data.rows; callbackFun(dataList);// 回调 }); } } }) }); } } }]);