最近在写一统计页面,只用到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'] }); //初始化完成 });
发表评论