场景需求:layui弹出模态框,显示数据记录。
解决方案:选择layui table组件laypages应该是比较无缝的对接,但是laypages组件的翻页需要后台参数的配合。由于后台权限不在自己手中,选择了CJJTable前端分页插件。
代码展示:
//执行数据读取; $.ajax({ type: 'post', async: true, data: {limitNum: 100}, url: './api/api.php?act=getCityRank&token=3cab7ce4142608c0f40c785b5ab5ca24', dataType: "json", success: function (res) { getTables(res.data); }, error: function (err) { console.log(err + "请求数据失败!"); } }); //渲染表格; function getTables(data) { $('#dataTables').CJJTable({ 'title': ["站点Id", "站点名称", "交易额"],//thead中的标题 必填 'body': ["uniacid", "name", "totalPays"],//tbody td 取值的字段 必填 'display': [1, 1, 1],//隐藏域,1显示,2隐藏 必填 'pageNUmber': 15,//每页显示的条数 选填 'pageLength': data.length,//选填 'url': data,//数据源 必填 }); }
Done!