layui table不支持跨域请求以及不支持多层数据嵌套的替代方案laypage组件使用

layui table异步数据接口不支持跨域，不支持多层数据嵌套的替代办法

table组件的request请求不支持跨域，response不支持获取到嵌套的数据（使用data.obj.list这种形式获取嵌套的集合）

使用laypage组件

示例中使用了jsrender来填充table

html代码如下

	<!--table部分-->
			<table class="layui-table" id="adminTable" lay-filter="adminTable">
				<thead><tr><th>登录名</th><th>上次登录时间</th><th>管理员类型</th><th>是否有效</th><th>具体操作</th></tr></thead>
				<tbody></tbody>
			</table>

			<!--layer分页组件-->
			<div id="page_model">
				<div id="paged" class="page">
				</div>
			</div>
			
			<!--表格数据的模板jsrender -->
			<script id="table_tr" type="text/x-jsrender">
				{{for data}}
				<tr>
					<td>{{:username}}</td>
					<td>{{:loginTime}}</td>
					<td>
						{{: atype==1 ? '超级管理员' : '普通用户' }}
					</td>
					<td>
						{{: isValid==1 ? '有效' : '无效' }}
					</td>
					<td>
						<a class="layui-btn layui-btn-primary layui-btn-xs tool" lay-event="detail"  onclick="detail({{:id}})">查看</a>
						<a class="layui-btn layui-btn-xs tool" lay-event="edit"  onclick="edit({{:id}})">编辑</a>
					</td>
				</tr>
				{{/for}}
			</script>

js代码如下

$(function() {
	//ajax请求后台数据
	getPage();
	toPage();
});
//分页参数设置 这些全局变量关系到分页的功能
var limitAllAppoint = 10; //每页显示条数
var currentPageAllAppoint = 1; //当前页码
var totalPageAllAppoint = 0; //总页数
var totalCount = 0; //总条数
//ajax请求后台数据
function getPage() {
	$.ajax({
		type: "get",
		async: false,
		url: config.url + "cms/getAdminsByPage",
		xhrFields: {
			withCredentials: true
		},
		crossDomain: true,
		data: {
			//这块可以添加自己的分页查询条件
			currentPage: currentPageAllAppoint, //当前页码
			pageCount: limitAllAppoint //每页显示条数
		},
		success: function(data, status) {
			data = JSON.parse(data);
			getPageInfo(data.t.beanList);
			totalPageAllAppoint = data.t.tp; //总页数(后台返回)
			totalCount = data.t.totalCount; //总条数
		}
	});
};

//表格加载数据
function getPageInfo(data) {

	//获取模板
	var template = $.templates("#table_tr");
	//将模板与数据拼合得到html字符串
	var htmlOutput = template.render({
		"data": data
	});
	if(data.length > 0) {
		$("#page_model").show();
		$("#adminTable tbody").html(htmlOutput);
	} else {
		//如果无数据，隐藏分页组件
		$("#page_model").hide();
		$("#adminTable tbody").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
	}
};

//分页组件
function toPage() {
	layui.use('laypage', function() {
		var laypage = layui.laypage;
		//执行一个laypage实例
		laypage.render({
			elem: 'paged', //注意，这里的 test1 是 ID，不用加 # 号
			last: totalPageAllAppoint, //总页数
			count: totalCount, //总条数
			layout:['prev', 'page', 'next','count','skip'],//自定义排版
			//切换分页的回调
			jump: function(obj, first) {
				//obj包含了当前分页的所有参数，比如：
				//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
				currentPageAllAppoint = obj.curr;
				//首次不执行
				if(!first) {
					getPage();
				}
			}
		});
	});
};

最后别忘了layui.use初始化layer组件。