Filter data
<!--Filter data-->
<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="">Running status</option>
<option value="Normal">Normal</option>
<option value="Alarm">Alarm</option>
<option value="Offline">Offline</option>
</select></div>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="region" id="sub_region" autocomplete="off">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" placeholder="class name" id="device" autocomplete="off">
</div>
<a class="layui-btn layui-btn-normal" id="searchBtn"><i class="layui-icon layui-icon-search"></i> Query</a>
<a class="layui-btn" id="reload"><i class="layui-icon layui-icon-refresh-1"></i> Refresh</a>
</div>
</form>
</div>
</div>
Table construction
<!--Data 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">Electric energy data analysis table</td>
<td colspan="7" class="tablebg2">Monthly power <span style="color: #e60000;font-size: 10px;"> kW·h</span></td>
<td colspan="4" class="tablebg1">Annual power <span style="color: #e60000;font-size: 10px;"> kW·h</span></td>
<td colspan="3" class="tablebg2">Current <span style="color: #e60000;font-size: 10px;">A</span></td>
<td class="tablebg1">Power<span style="color: #e60000;font-size: 10px;"> kW</span></td>
<td class="tablebg2"></td>
<td class="tablebg1"></td>
</tr>
<tr align="center" style="font-weight: bold;">
<td class="tablebg2" colspan="3">Total</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">Serial number</td>
<td class="tablebg1">Location</td>
<td class="tablebg2">Region</td>
<td class="tablebg1">2023.09</td>
<td class="tablebg2">2023.08</td>
<td class="tablebg2">2023.07</td>
<td class="tablebg2">Month-to-Month</td>
<td class="tablebg1">2023.06</td>
<td class="tablebg2">2023.05</td>
<td class="tablebg1">2023.04</td>
<td class="tablebg2">2023</td>
<td class="tablebg1">2022</td>
<td class="tablebg1">2021</td>
<td class="tablebg1">YoY</td>
<td class="tablebg2">Phase A</td>
<td class="tablebg2">Phase B</td>
<td class="tablebg2">C phase</td>
<td class="tablebg1">Electrical power</td>
<td class="tablebg2">Data time</td>
<td class="tablebg1">Details</td>
</tr>
</thead>
<tbody></tbody>
</table>
Filter events
//Filter loading
$("#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);
//Download Data;
getTables(device, sub_region, sensorStatusVal);
});
//Load table by default
getTables('', '', '');
});
Summary calculation and assignment
//02. Sum and assign;
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, ""));
Table rendering
//03. Rendering table
$('#example').DataTable({<!-- -->
dom: '<"searchBox"l>t<"dtPage"i>p',//control position f
//scrollX: true,
bFilter: true,//Filter search
pagingType: "first_last_numbers",//Paging style
pageLength: 15,//The number of items displayed by default;
bPaginate: true,//Pagination master switch
//destroy: true,
lengthMenu: [15, 25, 50, 75, 100, 200],
language: {<!-- -->
emptyTable: 'No data',
loadingRecords: 'Loading...',
processing: 'Querying...',
search: 'Search:',
lengthMenu: '_MENU_ data per page',
zeroRecords: 'No data',
paginate: {<!-- -->
'first': 'Homepage',
'last': 'Last page',
'next': 'Next page',
'previous': 'Previous page'
},
info: 'Total: _TOTAL_ pieces of data',
infoEmpty: 'No data',
infoFiltered: '(Filter _MAX_ items)',
}
});
Pi pit guide
Once an instance of DataTable is created, it cannot be reinitialized
- Check the DataTable initialization code: make sure you initialize the DataTable correctly and pass the correct parameters. You can check out the documentation or sample code for DataTable.js to make sure you’re initializing it the right way.
- Check the data format: Make sure the data format you provide to the DataTable is correct. DataTable.js usually requires data to be delivered in a specific format, such as JSON. You can check whether the data is organized in the correct format.
- Check dependencies: Make sure you have included all dependencies required by DataTable.js. In some cases, DataTable.js may require additional libraries or plugins to work properly. You can check out the documentation for DataTable.js to learn about the dependencies it requires and make sure you’ve loaded them correctly.
- The code was tested in DataTable.js version 1.10.21, but sometimes updating to the latest version may solve some problems. Try upgrading DataTable.js to the latest version and see if there are any improvements.
- Check browser compatibility: Make sure the browser you are using supports the DataTable.js library. Some older browsers may not support some JavaScript features or libraries. Try testing your code in different browsers to determine if there are compatibility issues.
@missingsometimes