一个基于Angularjs、layer的分页指令

最新推荐文章于 2019-07-27 13:59:36 发布

javaweiming

最新推荐文章于 2019-07-27 13:59:36 发布

阅读量841

点赞数

分类专栏： angularJs 文章标签： angularjs layer

本文链接：https://blog.csdn.net/javaweiming/article/details/78616713

版权

angularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html代码：

<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, param, function(resp) {
								var data_list = resp.data.rows;
								pageInfo.data_list = data_list;
								callbackFun(pageInfo);// 回调  
							});
						   }
					    }
					})
			    });
   			}
   		}
}]);

效果图：