关于Layui分页及Table展示的封装

baseschlist.jsp

<!--=======================列表布局及内容样式代码 ==========================-->
<div class="main">
	<table class="layui-table">
		<colgroup>
			
		</colgroup>
		<thead>
			<tr>
				<th style='display:none;'><input type="checkbox" id="all"></th>
				<th>序号</th>
				<th>市州</th>
				<th>区县</th>
				<th>管辖机构</th>
				<th>驾培机构名称</th>
				<th>是否备案</th>
				<th>经营许可证编号</th>
				<th>经营许可日期</th>
				<th>经营许可截止日期</th>
				<th>经营范围</th>
				<th>分类等级</th>
				<th>运营服务商审核状态</th>
				<th>创建日期</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="list"></tbody>
	</table>
</div>
<!--================分页样式代码 ======================-->
<div class="bottom">
	<div id="demo7" class="demo-pages1"></div>
	<div class="demo-pages" >
		<p id="">
			第<span id="currPage"></span>页,共<span id="totalPage"></span>页;共<span id="totalRows"></span>项，每页<span id="rows"></span>项
		</p>
	</div>		
</div>

baseschlist.js

var url=path+"/baseSch/queryPageList";
var totalurl=path+"/baseSch/queryByCount";
var gotolist = path+"/baseSch/goToBaseSchDetail";
var gotomodify = path+"/baseSch/goToBaseSchModify";
var gotomanage = path+"/baseSch/goToManageRelation";
var addHtml ;
var detail="";
var mdf="";
var remov="";
var relation="";
 
 //初始化分页
$(function(){
	pageInit();
});
 
var pageInit = function (){
	//对数据结果集进行Table格式封装
	addHtml = function(json){
		var html = "";
		var datas = json.data;
		for (var i in datas) {
			var d = datas[i];
			var index = parseInt(i) + 1;
			var url = gotolist+"?licnum="+d.licnum;
			var url2 = gotomodify+"?licnum="+d.licnum;
			var url3 = gotomanage+"?licnum="+d.licnum+"&organiz="+d.organiz;
			var isrecord = d.isrecord;
			if(isrecord == 1) {
				isrecord="是";
			}  else {
				isrecord="否";
			}
			var level = d.level;
			if(level == 1) {
				level="一级";
			} else if (level == 2) {
				level="二级";
			}  else if (level == 3) {
				level="三级";
			}  else {
				level="错误";
			}
			html += "<tr><td style='display:none;'><input name='pageCheckBox' type='hidden' value='"+d.licnum+"'></td>"
			+"<td>" + index + "</td>" 
			+ "<td>" + d.districtStr + "</td>" 
			+  "<td>" + d.dcodeStr + "</td>" 
			+ "<td>" + d.organizStr + "</td>" 
			+ "<td>" + d.name + "</td>" 
			+"<td>" + isrecord + "</td>" 
			+"<td>" + d.licnum + "</td>" 
			+"<td>" + d.licetimeStr + "</td>" 
			+"<td>" + d.licevalidtimeStr + "</td>" 
			+"<td>" + d.busiscope + "</td>" 
			+"<td>" + level + "</td>" 
			+"<td>" + d.bussCheck + "</td>" 
			+"<td>" + d.createtimeStr + "</td>" 
			+"<td id='LAY_demo'>";

			if(detail=="详情"){
				html += "<a href='javascript:void(0);' class='layui-btn1' οnclick=\"detailById('"+d.licnum+"')\">详情</a>";
			}
			if(mdf=="修改"){
				html += "<button class='layui-btn1' οnclick=\"modify('"+d.licnum+"','"+d.isrecord+"')\">修改</button>";
			}
			if(remov=="删除"){
				html += "<button class='layui-btn1' οnclick=\"remove3('"+d.licnum+"','"+d.isrecord+"')\">删除</button>";
			}
			if(relation=="运营商关系管理"){
				html += "<a href='javascript:void(0);' class='layui-btn1' " +
				"οnclick=\"manageRelationById('"+d.licnum+"','"+d.organiz+"')\">运营商关系管理</a>";
			}
			html += "</td>"+"</tr>";
		}
		return html;
	}
	var pageUtil = $(document).PaginBar('demo7','list',"tableFrom",10,1,url,totalurl,addHtml);
	queryPageCount();
}

jquery.page.js（对layui分页及表格展示方式的封装，公共展示）

;(function($){
	$.fn.extend({
		/**
		 * @author zhanglei
		 * @param divId 分页器ID
		 * @param table <table>标签ID
		 * @param selectFrom 查询条件的formID
		 * @param rows  每页显示条数
		 * @param pageIndex 默认页面1
		 * @param url 访问后台地址
		 * @param totalUrl 查询总数Url
		 * @param addhtml 返回json自定义html组合方法,传入你自定义的方式
		 * 具体例子在dictionary.jsp
		 * 例：var addhtml = function(json){
		 *       return html;
		 *     }
		 */
		"PaginBar":function(divId,table,selectFrom,rows,pageIndex,url,totalUrl,addhtml){
			var divId = $("#"+divId+"");
			var tableId = $("#"+table+"");
			var fromId = $("#"+selectFrom+"");
			var url = url;
			var totalUrl = totalUrl;
			var pageIndex = pageIndex;
			var rows = rows;
			var count = 0;
			var paramData = {};
			var addHtmlMthod = addhtml;
			var pageTotal =  0;
			var layerIndex;
			var layer;
			/**
			 * 分页查询入口
			 * 查询总页数
			 */
			queryPageCount = function(){
				 openLoad();
				 var p = $.post(totalUrl,paramData,function(json){
			    	  if (json.errorcode == 0) {
			    		  count =  json.data;
			    		  pageTotal = Math.ceil(count / rows);
			    		  innerPageHtml();
			    		  queryPage();
			    	  }else{
			    		  layer.alert('未查询到相关数据!!');
			    	  }
			      },"json");
                 p.error(function(){
                	 closeLoad();
                	 layer.alert('加载数据失败请重试!!');  
                 }) 	
			},
			/**
			 * 打开加载
			 */
			openLoad = function(){
				  layui.use('layer', function(){ //独立版的layer无需执行这一句
				  var $ = layui.jquery;
				  layer = layui.layer; //独立版的layer无需执行这一句
				  layerIndex = layer.open({
					  type: 3
				     ,shade: 0.2
				     ,icon:2
				     ,time:10000
				  });
				 });
			},
			/**
			 * 默认取消选中ID请设置为all
			 */
			unselectCheack = function(){
			if($("#all").length > 0){
		        $("#all").prop("checked", false);
	            }	
			},
			/**
			 * 关闭加载
			 */
			closeLoad = function(){
				 if( layerIndex != undefined){
					 layer.close(layerIndex); 
				 }	
			},
			/**
			 * 滚动条置顶
			 */
			scrollTop = function(){
				$('html, body').animate({scrollTop:130}, 'fast');
			},
			/**
			 * 按页数查询
			 */
				queryPage = function(){
					layui.use(['laypage', 'layer','form'],
						function() {
							var laypage = layui.laypage,
								layer = layui.layer,
								form = layui.form();
							laypage({
								cont: divId,
								pages: pageTotal,//得到总页数
								skip: true,
								skin: '#009688',
								first: '首页',
								last: '尾页',
//								prev: '上一页',//左右选择
//								next: '下一页',
								groups:5,
								curr:this.pageIndex,
								jump: function(obj) {
									var $span = $("<div style='display:inline;'>  共<input style='margin-left:7px;color:#333;border:0;font-weight:bold' class='layui-laypage-next' value='" + pageTotal + "' readonly='readonly'/>页  " + "," + "  共<input style='margin-left:10px;color:#333;border:0;font-weight:bold' class='layui-laypage-next' value='" + count + "' readonly='readonly'/>条" + "</div>");
									//spanstyle.insertBefore($span,spanstyle);
									divId.find("span :last").after($span);
									openLoad();
									var curr = obj.curr;
									paramData.rows = rows;
									paramData.pageIndex = curr;
									var p = $.post(url,paramData,
										function(json) {
											if (json.errorcode == 0) {
												setCurrPageHtml(curr);
												var html = addHtmlMthod(json);
												tableId.html(html);
												if(curr > 1){
													scrollTop();
												}
												unselectCheack();
											} else {
												layer.alert('未查询到相关数据!!');
											}
											closeLoad();
											form.render('checkbox');
										},
										"json");
									p.error(function(){
										closeLoad();
										layer.alert('加载数据失败请重试!!');
									})
								}
							});
						});
				},
			/**
			 * 重置表单
			 */
			resetFrom = function(){
				$("#"+selectFrom+"")[0].reset(); 
			},
			/**
			 * 初始化设置pageInfo html
			 */
			innerPageHtml = function(){
				$("#currPage").html(pageIndex);
				$("#totalPage").html(pageTotal);
				$("#totalRows").html(count);
				$("#rows").html(rows);
				$("#excelrows").val(rows);
			},
			setCurrPageHtml = function(curr){
				$("#currPage").html(curr);
				$("#excelpage").val(curr);
			},
			/**
			 * 按from表单填入的数据查询
			 */
			termQueryPage = function(){
				paramData = {};
				var fromData = fromId.serializeArray();
				//判断该查询条件是否存在
				$.each(fromData, function() {
					var d = paramData[this.name];
					if( d !=undefined && d !=""){
						if(this.value !=undefined && this.value !="" && this.value != 0){
							paramData[this.name] = this.value;
						}else{
							delete paramData[this.name]; 
						}
					}else{
						if(this.value !=undefined && this.value !="" && this.value != 0)
							paramData[this.name] = this.value;	
					}
				});
				queryPageCount();
			}
		} //主函数
	});//fn
}(jQuery));