Echarts实战案例代码(21)：front

场景需求：layui弹出模态框，显示数据记录。
解决方案：选择layui table组件laypages应该是比较无缝的对接，但是laypages组件的翻页需要后台参数的配合。由于后台权限不在自己手中，选择了CJJTable前端分页插件。
代码展示：

1    //执行数据读取;
2    $.ajax({
3   
4   
5   
6        type: 'post',
7        async: true,
8        data: {
9   
10   
11   limitNum: 100},
12        url: './api/api.php?act=getCityRank&token=3cab7ce4142608c0f40c785b5ab5ca24',
13        dataType: "json",
14        success: function (res) {
15   
16   
17   
18            getTables(res.data);
19        },
20        error: function (err) {
21   
22   
23   
24            console.log(err + "请求数据失败!");
25        }
26    });
27
28    //渲染表格;
29    function getTables(data) {
30   
31   
32   
33        $('#dataTables').CJJTable({
34   
35   
36   
37            'title': ["站点Id", "站点名称", "交易额"],//thead中的标题 必填
38            'body': ["uniacid", "name", "totalPays"],//tbody td 取值的字段 必填
39            'display': [1, 1, 1],//隐藏域，1显示，2隐藏 必填
40            'pageNUmber': 15,//每页显示的条数 选填
41            'pageLength': data.length,//选填
42            'url': data,//数据源 必填
43        });
44    }

Done！

本文同步分享在 博客“漏刻有时”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。