DataTables.js综合应用开发(ajax筛选查询、同列数据汇总、环比数据)

筛选数据

    
    <div class="layui-card" style="margin-bottom: 50px;">
        <div class="layui-row">
            <form class="layui-form layui-col-md12" style="margin: 10px;">
                <div class="demoTable" style="width: 100%;">
                    <div class="layui-input-inline">
                        <select name="sensorStatusVal" id="sensorStatusVal" class="layui-input">
                            <option value="">运行状态option>
                            <option value="正常">正常option>
                            <option value="告警">告警option>
                            <option value="离线">离线option>
                        select>div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="区域" id="sub_region" autocomplete="off">
                    div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="班级名称" id="device" autocomplete="off">
                    div>
                    <a class="layui-btn layui-btn-normal" id="searchBtn"><i class="layui-icon layui-icon-search">i> 查询a>
                    <a class="layui-btn" id="reload"><i class="layui-icon layui-icon-refresh-1">i> 刷新a>
                div>
            form>
        div>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Table构建

    <table id="example" class="display panel" role="grid" aria-describedby="example_info" style="width: 98%;border: 1px #b1b1b1 solid;">
        <thead>
        <tr align="center">
            <td class="tablebg1" colspan="3">电能数据分析表td>
            <td colspan="7" class="tablebg2">月电量 <span style="color: #e60000;font-size: 10px;"> kW·hspan>td>
            <td colspan="4" class="tablebg1">年电量 <span style="color: #e60000;font-size: 10px;"> kW·hspan>td>
            <td colspan="3" class="tablebg2">电流 <span style="color: #e60000;font-size: 10px;">Aspan>td>
            <td class="tablebg1">功率<span style="color: #e60000;font-size: 10px;"> kWspan>td>
            <td class="tablebg2">td>
            <td class="tablebg1">td>
        tr>
        <tr align="center" style="font-weight: bold;">
            <td class="tablebg2" colspan="3">合计td>
            <td class="tablebg1" id="mt0">td>
            <td class="tablebg2" id="mt1">td>
            <td class="tablebg2" id="mt2">td>
            <td class="tablebg2" id="mt_diff">td>
            <td class="tablebg1" id="mt3">td>
            <td class="tablebg2" id="mt4">td>
            <td class="tablebg1" id="mt5">td>
            <td class="tablebg2" id="yt0">td>
            <td class="tablebg1" id="yt1">td>
            <td class="tablebg1" id="yt2">td>
            <td class="tablebg1" id="yt_diff">td>
            <td class="tablebg2">td>
            <td class="tablebg2">td>
            <td class="tablebg2">td>
            <td class="tablebg1">td>
            <td class="tablebg2">td>
            <td class="tablebg1">td>
        tr>
        <tr align="center">
            <td class="tablebg1">序号td>
            <td class="tablebg1">位置td>
            <td class="tablebg2">区域td>
            <td class="tablebg1">2023.09td>
            <td class="tablebg2">2023.08td>
            <td class="tablebg2">2023.07td>
            <td class="tablebg2">月环比td>
            <td class="tablebg1">2023.06td>
            <td class="tablebg2">2023.05td>
            <td class="tablebg1">2023.04td>
            <td class="tablebg2">2023年td>
            <td class="tablebg1">2022年td>
            <td class="tablebg1">2021年td>
            <td class="tablebg1">年环比td>
            <td class="tablebg2">A相td>
            <td class="tablebg2">B相td>
            <td class="tablebg2">C相td>
            <td class="tablebg1">电功率td>
            <td class="tablebg2">数据时间td>
            <td class="tablebg1">详情td>
        tr>
        thead>
        <tbody>tbody>
    table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

筛选事件

        //筛选加载
        $("#searchBtn").click(function () {
            $('#example').dataTable().fnClearTable();
            $('#example').dataTable().fnDestroy();
            var device = $("#device").val();
            var sub_region = $("#sub_region").val();
            var sensorStatusVal = $("#sensorStatusVal").val();

            //console.log(device, sub_region, sensorStatusVal);
            //加载数据;
            getTables(device, sub_region, sensorStatusVal);
        });

        //默认加载表格
        getTables('', '', '');
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

汇总计算并赋值

 //02.求和并赋值;
                    var mt0 = calculateSum(json, "prev_0_month_val_diff")
                    var mt1 = calculateSum(json, "prev_1_month_val_diff");
                    var mt2 = calculateSum(json, "prev_2_month_val_diff");
                    var mt3 = calculateSum(json, "prev_3_month_val_diff");
                    var mt4 = calculateSum(json, "prev_4_month_val_diff");
                    var mt5 = calculateSum(json, "prev_5_month_val_diff");
                    //console.log(sum1);
                    $("#mt0").html(keepDecimal(mt0, 2));
                    $("#mt1").html(keepDecimal(mt1, 2));
                    $("#mt2").html(keepDecimal(mt2, 2));
                    $("#mt_diff").html(checkDifference(mt1, mt2, ""));
                    $("#mt3").html(keepDecimal(mt3, 2));
                    $("#mt4").html(keepDecimal(mt4, 2));
                    $("#mt5").html(keepDecimal(mt5, 2));

                    var yt0 = calculateSum(json, "prev_0_yeal_val_diff")
                    var yt1 = calculateSum(json, "prev_1_yeal_val_diff");
                    var yt2 = calculateSum(json, "prev_2_yeal_val_diff");
                    //console.log(sum1);
                    $("#yt0").html(keepDecimal(yt0, 2));
                    $("#yt1").html(keepDecimal(yt1, 2));
                    $("#yt2").html(keepDecimal(yt2, 2));
                    $("#yt_diff").html(checkDifference(yt1, yt2, ""));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

表格渲染

   //03.渲染表格
                    $('#example').DataTable({
                        dom: '<"searchBox"l>t<"dtPage"i>p',//控件位置f
                        //scrollX: true,
                        bFilter: true,//过滤搜索
                        pagingType: "first_last_numbers",//分页样式
                        pageLength: 15,//默认显示条数;
                        bPaginate: true,//分页总开关
                        //destroy: 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_ 条)',
                        }
                    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

皮坑指南

DataTable 的实例一旦创建，就不能重新初始化

1. 检查DataTable的初始化代码：确保你正确地初始化了DataTable，并且传递了正确的参数。你可以查看DataTable.js的文档或示例代码，以确保你按照正确的方式进行初始化。
2. 检查数据格式：确保你提供给DataTable的数据格式是正确的。DataTable.js通常要求数据以特定的格式进行传递，例如JSON格式。你可以检查数据是否按照正确的格式进行组织。
3. 检查依赖项：确保你已经包含了DataTable.js所需的所有依赖项。在某些情况下，DataTable.js可能需要其他库或插件来正常工作。你可以查看DataTable.js的文档，了解它所需的依赖项，并确保你已经正确地加载了它们。
4. 代码是在DataTable.js 1.10.21版本测试通过，但是有时候更新到最新版本可能会解决一些问题。尝试升级DataTable.js到最新版本，并查看是否有任何改进。
5. 检查浏览器兼容性：确保你使用的浏览器支持DataTable.js库。某些旧版本的浏览器可能不支持一些JavaScript特性或库。尝试在不同的浏览器中测试你的代码，以确定是否存在兼容性问题。

---

@漏刻有时