Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案

简介: Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案


场景需求: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!

相关文章
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
60 0
|
5月前
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
55 0
|
1月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
1月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
48 3
|
3月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
3月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
182 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
4月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
22 0