AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Datatables展示数据（表格合并、日期计算、异步加载数据、分页显示、筛选过滤）

2023-07-25 172
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Datatables展示数据（表格合并、日期计算、异步加载数据、分页显示、筛选过滤）

前言


Datatables是一款jquery表格插件，jquery表格插件是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。


分页，即时搜索和排序

几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理

支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

各式各样的扩展: Editor, TableTools, FixedColumns

丰富多样的option和强大的API

超过2900+个单元测试

免费开源


一、html容器构建

1.操作按钮

<!--操作按钮-->
<div class="btn-group">
    <button id="reload" class="searchBtn progress">刷新</button>
    <button id="all" class="searchBtn all">全部</button>
    <button id="total" class="searchBtn all">总量</button>
<!--    <button id="progress" class="searchBtn stopped">A相电流</button>
    <button id="alerted" class="searchBtn stopped">B相电流</button>
    <button id="closed" class="searchBtn stopped">C相电流</button>-->
</div>


2.表格构建

<table id="example" class="display panel" role="grid" aria-describedby="example_info">
    <thead>
    <tr align="center">
        <td></td>
        <td></td>
        <td colspan="6" class="tablebg2">月电量 <span style="color: #e60000;font-size: 10px;">Kwh</span></td>
        <td colspan="3" class="tablebg1">年电量 <span style="color: #e60000;font-size: 10px;">Kwh</span></td>
        <td colspan="3" class="tablebg2">电流  <span style="color: #e60000;font-size: 10px;">A</span></td>
        <td class="tablebg1">功率  <span style="color: #e60000;font-size: 10px;">W</span></td>
    </tr>
    <tr align="center">
        <td>序号</td>
        <td>位置</td>
        <td class="tablebg2">{'0'|getPowerDate:'0'}</td>
        <td class="tablebg2">{'0'|getPowerDate:'-1'}</td>
        <td class="tablebg2">{'0'|getPowerDate:'-2'}</td>
        <td class="tablebg2">{'0'|getPowerDate:'-3'}</td>
        <td class="tablebg2">{'0'|getPowerDate:'-4'}</td>
        <td class="tablebg2">{'0'|getPowerDate:'-5'}</td>
        <td class="tablebg1">{'1'|getPowerDate:'0'}</td>
        <td class="tablebg1">{'1'|getPowerDate:'-1'}</td>
        <td class="tablebg1">{'1'|getPowerDate:'-2'}</td>
        <td class="tablebg2">A相电流</td>
        <td class="tablebg2">B相电流</td>
        <td class="tablebg2">C相电流</td>
        <td class="tablebg1">电功率</td>
    </tr>
    </thead>
    <tbody></tbody>
</table>


二、时间日期计算

/*时间表头
 * $type 0月份1年份;
 * $inter 时间间隔
*/
function getPowerDate($type, $inter)
{
    //返回月份
    if ($type == 0) {
        return date("Y-m", strtotime("" . $inter . " month"));
    }
    //返回年份
    if ($type == 1) {
        return date("Y", strtotime("" . $inter . " year"));
    }
}


三、dataTables属性配置

1.调用

使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。

    <link rel="stylesheet" href="css/jquery.dataTables.css">
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>


2.过滤按钮

//重载页面;
        $("#reload").click(function () {
            window.location.href = window.location.href;
        })
        $('#all').on('click', function () {
            $('.dataTables_filter [type=search]').val("").keyup();
        });
        $('#progress').on('click', function () {
            $('.dataTables_filter [type=search]').val("A相电流").keyup();
        });
        $('#alerted').on('click', function () {
            $('.dataTables_filter [type=search]').val("A相电流").keyup();
        });
        $('#closed').on('click', function () {
            $('.dataTables_filter [type=search]').val("C相电流").keyup();
        });
        $('#total').on('click', function () {
            $('.dataTables_filter [type=search]').val("总量").keyup();
        });


3.异步加载数据

    $.ajax({
        type: 'get',
        async: true,
        data: {},
        url: 'api/api.php?act=getIotPower&token=3cab7ce4142608c0f40c785b5ab5ca24',
        dataType: "json",
        success: function (res) {
        //核心代码
        } else {
              //无数据判断
            }
        },
        error: function (err) {
            console.log(err);
        }


4.核心代码

DataTable属性配置

$('#example').DataTable({
                    dom: '<"searchBox"lf>t<"dtPage"i>p',//控件位置
                    bFilter: true,//过滤搜索
                    pagingType: "first_last_numbers",//分页样式
                    pageLength: 15,//默认显示条数;
                    bPaginate: true,//分页总开关
                    lengthMenu: [15, 25, 50, 75, 100, 200],
                    language: {
                        emptyTable: '没有数据',
                        loadingRecords: '加载中...',
                        processing: '查询中...',
                        search: '搜索：',
                        lengthMenu: '每页 _MENU_ 条数据',
                        zeroRecords: '没有数据',
                        paginate: {
                            'first': '首页',
                            'last': '尾页',
                            'next': '下一页',
                            'previous': '上一页'
                        },
                        info: '共计：_TOTAL_ 条数据',
                        infoEmpty: '没有数据',
                        infoFiltered: '(过滤 _MAX_ 条)',
                    }
                });


数据运算

var json = res.data;
            //console.log(json);
            var html = '';
            if (res.data != null) {
                for (var i = 0; i < json.length; i++) {
                    var sensor = json[i].data.propertyType;
                    var b_yesterday_val = json[i].odata.b_yesterday_val.split(",");
                    var yesterday_val = json[i].odata.yesterday_val.split(",");
                    var last_month_val = json[i].odata.last_month_val.split(",");//1月
                    var b_last_month_val = json[i].odata.b_last_month_val.split(",");//2月
                    var last_year_val = json[i].odata.last_year_val.split(",");
                    var b_last_year_val = json[i].odata.b_last_year_val.split(",");
                    var three_days_ago_val = json[i].odata.three_days_ago_val.split(",");
                    var three_month_ago_val = json[i].odata.three_month_ago_val.split(",");//3月
                    var three_years_ago_val = json[i].odata.three_years_ago_val.split(",");
                    var four_month_ago_val = json[i].odata.four_month_ago_val.split(",");//4月
                    var five_month_ago_val = json[i].odata.five_month_ago_val.split(",");//5月
                    var six_month_ago_val = json[i].odata.six_month_ago_val.split(",");//6月
                    var normValue = json[i].sdata.split(",");
                    var sta = json[i].data.sensorStatus;
                    var norm = sensor.split(",");
                    var staValue = sta.split(",");
                    //新增当日/月/年数据 2022.07.23 BY poleung;
                    var today_val = json[i].odata.today_val.split(",");
                    var current_month = json[i].odata.current_month.split(",");//当月
                    var current_year = json[i].odata.current_year.split(",");
                    //console.log(today_val);
                    //数据排序，防止错乱;
                    var normT = [], statusT = [], b_yesterday = [], yesterday = [], b_last_month = [], last_month = [],four_month = [],five_month = [],six_month = [],
                        b_last_year = [], last_year = [];
                    for (var j = 0; j < norm.length; j++) {
                        //日用量
                        if (norm.indexOf("电量") == -1) {
                            normT[0] = "-";
                            statusT[0] = "无设备";
                        } else {
                            if (norm[j] == "电量") {
                                //normT[0] = parseFloat(normValue[j] - yesterday_val[j]).toFixed(2);
                                normT[0] = getPositive(parseFloat(today_val[j] - yesterday_val[j]).toFixed(2));//今天
                                statusT[0] = staValue[j];
                                yesterday[0] = getPositive(parseFloat(yesterday_val[j] - b_yesterday_val[j]).toFixed(2));
                                b_yesterday[0] = getPositive(parseFloat(b_yesterday_val[j] - three_days_ago_val[j]).toFixed(2));
                            }
                        }
                        //月用量
                        if (norm.indexOf("电量") == -1) {
                            normT[1] = "-";
                            statusT[1] = "无设备";
                        } else {
                            if (norm[j] == "电量") {
                                statusT[1] = staValue[j];
                                normT[1] = getPositive(parseFloat(current_month[j] - last_month_val[j]).toFixed(2));//1
                                last_month[1] = getPositive(parseFloat(last_month_val[j] - b_last_month_val[j]).toFixed(2));//2
                                b_last_month[1] = getPositive(parseFloat(b_last_month_val[j] - three_month_ago_val[j]).toFixed(2));//3
                                four_month[1] = getPositive(parseFloat(three_month_ago_val[j] - four_month_ago_val[j]).toFixed(2));//4
                                five_month[1] = getPositive(parseFloat(four_month_ago_val[j] - five_month_ago_val[j]).toFixed(2));//5
                                six_month[1] = getPositive(parseFloat(five_month_ago_val[j] - six_month_ago_val[j]).toFixed(2));//6
                            }
                        }
                        //年用量
                        if (norm.indexOf("电量") == -1) {
                            normT[2] = "-";
                            statusT[2] = "无设备";
                        } else {
                            if (norm[j] == "电量") {
                                normT[2] = getPositive(parseFloat(current_year[j] - last_year_val[j]).toFixed(2));
                                statusT[2] = staValue[j];
                                last_year[2] = getPositive(parseFloat(last_year_val[j] - b_last_year_val[j]).toFixed(2));
                                b_last_year[2] = getPositive(parseFloat(b_last_year_val[j] - three_years_ago_val[j]).toFixed(2));
                            }
                        }
                        if (norm.indexOf("A相电流") == -1) {
                            normT[3] = "-";
                            statusT[3] = "无设备";
                        } else {
                            if (norm[j] == "A相电流") {
                                normT[3] = parseFloat(today_val[j]).toFixed(2);
                                statusT[3] = staValue[j];
                            }
                        }
                        if (norm.indexOf("B相电流") == -1) {
                            normT[4] = "-";
                            statusT[4] = "无设备";
                        } else {
                            if (norm[j] == "B相电流") {
                                normT[4] = parseFloat(today_val[j]).toFixed(2);
                                statusT[4] = staValue[j];
                            }
                        }
                        if (norm.indexOf("C相电流") == -1) {
                            normT[5] = "-";
                            statusT[5] = "无设备";
                        } else {
                            if (norm[j] == "C相电流") {
                                normT[5] = parseFloat(today_val[j]).toFixed(2);
                                statusT[5] = staValue[j];
                            }
                        }
                        if (norm.indexOf("电功率") == -1) {
                            normT[6] = "-";
                            statusT[6] = "无设备";
                        } else {
                            if (norm[j] == "电功率") {
                                normT[6] = parseFloat(today_val[j]).toFixed(2);
                                statusT[6] = staValue[j];
                            }
                        }
                    }
                    //构建表格;
                    html = "<tr><td>" + json[i].device_seq + "</td><td>"
                        + json[i].device + "</td><td class=\"tablebg1\">"
                        + normT[1] + "</td><td class=\"tablebg2\">"
                        + last_month[1] + "</td><td class=\"tablebg1\">"
                        + b_last_month[1] + "</td><td class=\"tablebg2\">"
                        + four_month[1] + "</td><td class=\"tablebg1\">"
                        + five_month[1] + "</td><td class=\"tablebg2\">"
                        + six_month[1] + "</td><td class=\"tablebg1\">"
                        + normT[2] + "</td><td class=\"tablebg1\">"
                        + last_year[2] + "</td><td class=\"tablebg1\">"
                        + b_last_year[2] + "</td><td>"+makeBold(normT[3],statusT[3])+"</td><td>"+makeBold(normT[4],statusT[4])+"</td><td>"+makeBold(normT[5],statusT[5])+"</td><td class=\"tablebg1\">"+makeBold(normT[6],statusT[6])+"</td></tr>";
                    //渲染表格;
                    $("#example tbody").append(html);
                }


总结

Datatables是一直接触的jquery表格插件，但仅限于项目部分功能的使用，因此对该插件也是用到时学习，满足了当前的需求就浅尝辄止了。但是随着同一个项目需求的不断变化，反正Datatables带来的惊喜：只有你没想到的功能，没有它实现不了的需求。因而为此记！

@漏刻有时

文章标签：
JavaScript
前端开发
容器
测试技术
API
漏刻有时
目录
相关文章
你挚爱的强哥
|
7月前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
你挚爱的强哥
92 0
蒋川@卡拉云
|
缓存 前端开发 JavaScript
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库，如果对这个库不太了解的同学可以先了解一下，这里不再赘述。简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML 和 CSS，而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。
蒋川@卡拉云
1349 0
夏天49597
|
1月前
|
前端开发 搜索推荐 测试技术
React 数据表格排序与过滤
本文介绍了如何在 React 中实现数据表格的排序和过滤功能，从基础概念到实际代码实现，涵盖排序和过滤的基本原理、实现步骤、常见问题及解决方法。通过合理管理状态、优化性能和避免常见错误，帮助开发者提高用户体验和开发效率。
夏天49597
51 4
朝阳39
|
5月前
|
前端开发
Element UI 表格常用改造（表头添加注释、翻页连续序号【内含前端分页】）
Element UI 表格常用改造（表头添加注释、翻页连续序号【内含前端分页】）
朝阳39
235 0
a15034260562-24955
|
7月前
|
JSON 开发框架 前端开发
利用bootstraptable展示数据，对数据进行排序分页等操作
利用bootstraptable展示数据，对数据进行排序分页等操作
a15034260562-24955
284 0
前端技术栈
|
7月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。
vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。
前端技术栈
136 0
rp54yl2b5rw2w
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
rp54yl2b5rw2w
1139 0
VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
阿甘兄
|
前端开发 JavaScript Java
70jqGrid - 一次性加载多级表格数据
70jqGrid - 一次性加载多级表格数据
阿甘兄
49 0
vaelcy
多种特殊echars图表实现的方式记录
多种特殊echars图表实现的方式记录
vaelcy
173 0
互联网课堂
|
Web App开发 前端开发 API
遇到表格，手动翻页太麻烦？我教你写脚本，一页展示所有数据
看到这篇文章的人，想必都是互联网用户吧。你们一定遇到过「表格」。 我们在阅读表格时，可能有这种困惑： 表格不支持关键词搜索 表格不支持按照某列排序 表格每页只能展示10条数据，需要不断翻页，才能看完所有内容 怎么办呢？ 如果表格一页能展示所有数据就好了！
互联网课堂
150 0

热门文章

最新文章

  • 1
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 2
    Maven 3.6.3 的下载、安装、配置、检测（详细讲解）
  • 3
    基于区块链的机器学习模型创建方案
  • 4
    WPF listview item mouse enter/over popup
  • 5
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 6
    [Spring]支持注解的Spring调度器
  • 7
    红帽7.4新增的安全特性
  • 8
    hdu 1800 Flying to the Mars
  • 9
    研究 flex 4 开发后台管理项目（1）
  • 10
    Error: XML response that was returned...
  • 1
    《docker高级篇（大厂进阶）：2.DockerFile解析》包括：是什么、DockerFile构建过程解析、DockerFile常用保留字指令、案例、小总结
    115
  • 2
    《Java 人工智能开发：Eclipse 与 IntelliJ IDEA 双雄助力》
    46
  • 3
    《Java 在开源 AI 框架中的中流砥柱角色》
    34
  • 4
    《Java 与大数据框架：AI 数据预处理的强力联盟》
    39
  • 5
    《Java 优化秘籍：计算密集型 AI 任务加速指南》
    35
  • 6
    《Java 与 OpenAI 协同：开启智能编程新范式》
    31
  • 7
    uniapp开发鸿蒙，是前端新出路吗？
    30
  • 8
    鸿蒙(HarmonyOS)原生AI能力之文本识别
    39
  • 9
    鸿蒙开发之PixelMap介绍与实现图片变换
    34
  • 10
    鸿蒙(HarmonyOS)开发之无须申请权限写入图片到相册
    40

    • 相关电子书

    更多
  • 4个迭代，从批量交...1573957773.pdf
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 使用交互方式实现数据查询、插入、修改和删除操作
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS