记nicePage实现json自动表格分页

QQ截图20190919004944.png

最近在写一统计页面,只用到Redis数据库查询数据,又不方便写分页查询,就从互联网上找到了这一上手简单快的插件。

缺点比较复杂的json数据的值解析不了。

基于layui框架,通过扩展nicePage.js实现JSON数据格式的自动表格分页和跳转功能,配置简单,上手速度快,兼容IE5+。

原nicePage.js代码:

window.nicePage = {
	table: "div",
	bar: "bar",
	limit: "10",
	color: "#1E9FFF",
	layout: ["count", "prev", "page", "next", "limit", "skip"],
	setCfg: function(b) {
		nicePage.table = b.table;
		nicePage.bar = b.bar;
		nicePage.limit = b.limit;
		nicePage.color = b.color;
		nicePage.layout = b.layout
	},
	returnHtml: function(g, e) {
		var h = '<table class="layui-table" lay-size="sm"><colgroup>';
		for (var f in e) {
			h += " <col width=" + e[f] + ">"
		}
		h += " </colgroup><thead><tr>";
		for (var f in g) {
			h += "  <th>" + g[f] + "</th>"
		}
		h += " </tr></thead> <tbody>";
		return h
	},
	returnList: function(j) {
		var h = new Array();
		for (var f in j) {
			var i = "";
			for (var g in j[f]) {
				i += j[f][g] + "_"
			}
			i = i.substring(0, i.length - 1);
			h.push(i)
		}
		return h
	},
	returnTable: function(e) {
		var h = e.split("_");
		var g = "<tr>";
		for (var f in h) {
			g += "<td>" + h[f] + "</td>"
		}
		g += "</tr>";
		return g
	}
};
$(function() {
	layui.use("laypage", function() {
		var a = layui.laypage;
		a.render({
			elem: nicePage.bar,
			limit: nicePage.limt,
			theme: nicePage.color,
			count: json.length,
			layout: nicePage.layout,
			jump: function(b) {
				document.getElementById(nicePage.table).innerHTML = function() {
					var c = [nicePage.returnHtml(nameList, widthList)],
						d = nicePage.returnList(json).concat().splice(b.curr * b.limit - b.limit, b.limit);
					layui.each(d, function(e, g) {
						var f = nicePage.returnTable(g);
						c.push(f)
					});
					c.push(" </tbody></table></br>");
					return c.join("")
				}()
			}
		})
	})
}); 


①使用时提取了部分的nicePage.js代码:

window.nicePage = {
	table: "div",
	bar: "bar",
	limit: "10",
	color: "#1E9FFF",
	layout: ["count", "prev", "page", "next", "limit", "skip"],
	setCfg: function(b) {
		nicePage.table = b.table;
		nicePage.bar = b.bar;
		nicePage.limit = b.limit;
		nicePage.color = b.color;
		nicePage.layout = b.layout
	},
	returnHtml: function(g, e) {
		var h = '<table class="layui-table" lay-size="sm"><colgroup>';
		for (var f in e) {
			h += " <col width=" + e[f] + ">"
		}
		h += " </colgroup><thead><tr>";
		for (var f in g) {
			h += "  <th>" + g[f] + "</th>"
		}
		h += " </tr></thead> <tbody>";
		return h
	},
	returnList: function(j) {
		var h = new Array();
		for (var f in j) {
			var i = "";
			for (var g in j[f]) {
				i += j[f][g] + "_"
			}
			i = i.substring(0, i.length - 1);
			h.push(i)
		}
		return h
	},
	returnTable: function(e) {
		var h = e.split("_");
		var g = "<tr>";
		for (var f in h) {
			g += "<td>" + h[f] + "</td>"
		}
		g += "</tr>";
		return g
	}
}; 


②配合layui使用时:

<center style="padding-top: 40px">
	<div style="width: 80%;padding-top: 20px">
		<!--以下为两个必须div元素-->
		<div id="table"></div>
		<div id="pageBar"></div>
	</div>
</center>


③配合layui使用提取部分时:

$(function () {
//nameList与widthList的数组长度要一致
var nameList = ['IP', '地址', '设备', '时间', '坐标(x)','坐标(y)'] //table的列名
var widthList = [100, 100, 100, 100, 100, 100] //table每列的宽度
	$.getJSON("http://www.xxx.com", function(data) {
		if(data==null){
		alert("数据获取失败!");
		}
	var json = data;//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]
	layui.use("laypage", function() {
			var a = layui.laypage;
			a.render({
				elem: nicePage.bar,
				limit: nicePage.limt,
				theme: nicePage.color,
				count: json.length,
				layout: nicePage.layout,
				jump: function(b) {
					document.getElementById(nicePage.table).innerHTML = function() {
						var c = [nicePage.returnHtml(nameList, widthList)],
							d = nicePage.returnList(json).concat().splice(b.curr * b.limit - b.limit, b.limit);
						layui.each(d, function(e, g) {
							var f = nicePage.returnTable(g);
							c.push(f)
						});
						c.push(" </tbody></table></br>");
						return c.join("")
					}()
				}
			})
		})
});
/**
 * 初始化设置nicepage组件
 *------------------------------------------------------------
 * 进行数据组装,与layui交互进行元素渲染
 *-------------------------------------------------------------
 * @param    {string}  table     table的div id
 * @param    {string}  bar     底部分页的div id
 * @param    {int}  limit     每页默认行数
 * @param    {string}  color     底部分页的颜色
 * @param    {array}  layout     底部分页的布局,具体可参考layui api
 * @date     2018-10-19
 * @author   Thomas.dz 
 */
//初始化
nicePage.setCfg({
	table: 'table',
	bar: 'pageBar',
	limit: 20,
	color: '#1E9FFF',
	layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
});
//初始化完成
});


转载请注明出处凌夕博客 »漫小猫原文地址《记nicePage实现json自动表格分页

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)