推广型网站建设模板,做网站的回扣,wordpress网易插件怎么用,山东省双体系建设网站系列文章目录
datatable 自定义筛选按钮的解决方案Echarts实战案例代码(21)#xff1a;front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案 文章目录系列文章目录前言一、html容器构建1.操作按钮2.表格构建二、时间日期计算三、dataTables属性配置1.调用2.过…系列文章目录
datatable 自定义筛选按钮的解决方案Echarts实战案例代码(21)front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案 文章目录系列文章目录前言一、html容器构建1.操作按钮2.表格构建二、时间日期计算三、dataTables属性配置1.调用2.过滤按钮3.异步加载数据4.核心代码DataTable属性配置数据运算总结前言 Datatables是一款jquery表格插件jquery表格插件是一个高度灵活的工具可以将任何HTML表格添加高级的交互功能。
分页即时搜索和排序几乎支持任何数据源DOM javascript Ajax 和 服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation各式各样的扩展: Editor, TableTools, FixedColumns丰富多样的option和强大的API超过2900个单元测试免费开源 一、html容器构建
1.操作按钮
!--操作按钮--
div classbtn-groupbutton idreload classsearchBtn progress刷新/buttonbutton idall classsearchBtn all全部/buttonbutton idtotal classsearchBtn all总量/button
!-- button idprogress classsearchBtn stoppedA相电流/buttonbutton idalerted classsearchBtn stoppedB相电流/buttonbutton idclosed classsearchBtn stoppedC相电流/button--
/div2.表格构建
table idexample classdisplay panel rolegrid aria-describedbyexample_infotheadtr aligncentertd/tdtd/tdtd colspan6 classtablebg2月电量 span stylecolor: #e60000;font-size: 10px;Kwh/span/tdtd colspan3 classtablebg1年电量 span stylecolor: #e60000;font-size: 10px;Kwh/span/tdtd colspan3 classtablebg2电流 span stylecolor: #e60000;font-size: 10px;A/span/tdtd classtablebg1功率 span stylecolor: #e60000;font-size: 10px;W/span/td/trtr aligncentertd序号/tdtd位置/tdtd classtablebg2{0|getPowerDate:0}/tdtd classtablebg2{0|getPowerDate:-1}/tdtd classtablebg2{0|getPowerDate:-2}/tdtd classtablebg2{0|getPowerDate:-3}/tdtd classtablebg2{0|getPowerDate:-4}/tdtd classtablebg2{0|getPowerDate:-5}/tdtd classtablebg1{1|getPowerDate:0}/tdtd classtablebg1{1|getPowerDate:-1}/tdtd classtablebg1{1|getPowerDate:-2}/tdtd classtablebg2A相电流/tdtd classtablebg2B相电流/tdtd classtablebg2C相电流/tdtd classtablebg1电功率/td/tr/theadtbody/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 relstylesheet hrefcss/jquery.dataTables.cssscript typetext/javascript srcjs/jquery.dataTables.js/script2.过滤按钮
//重载页面;$(#reload).click(function () {window.location.href window.location.href;})$(#all).on(click, function () {$(.dataTables_filter [typesearch]).val().keyup();});$(#progress).on(click, function () {$(.dataTables_filter [typesearch]).val(A相电流).keyup();});$(#alerted).on(click, function () {$(.dataTables_filter [typesearch]).val(A相电流).keyup();});$(#closed).on(click, function () {$(.dataTables_filter [typesearch]).val(C相电流).keyup();});$(#total).on(click, function () {$(.dataTables_filter [typesearch]).val(总量).keyup();});3.异步加载数据 $.ajax({type: get,async: true,data: {},url: api/api.php?actgetIotPowertoken3cab7ce4142608c0f40c785b5ab5ca24,dataType: json,success: function (res) {//核心代码} else {//无数据判断}},error: function (err) {console.log(err);}4.核心代码
DataTable属性配置
$(#example).DataTable({dom: searchBoxlftdtPageip,//控件位置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));//1last_month[1] getPositive(parseFloat(last_month_val[j] - b_last_month_val[j]).toFixed(2));//2b_last_month[1] getPositive(parseFloat(b_last_month_val[j] - three_month_ago_val[j]).toFixed(2));//3four_month[1] getPositive(parseFloat(three_month_ago_val[j] - four_month_ago_val[j]).toFixed(2));//4five_month[1] getPositive(parseFloat(four_month_ago_val[j] - five_month_ago_val[j]).toFixed(2));//5six_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 trtd json[i].device_seq /tdtd json[i].device /tdtd class\tablebg1\ normT[1] /tdtd class\tablebg2\ last_month[1] /tdtd class\tablebg1\ b_last_month[1] /tdtd class\tablebg2\ four_month[1] /tdtd class\tablebg1\ five_month[1] /tdtd class\tablebg2\ six_month[1] /tdtd class\tablebg1\ normT[2] /tdtd class\tablebg1\ last_year[2] /tdtd class\tablebg1\ b_last_year[2] /tdtdmakeBold(normT[3],statusT[3])/tdtdmakeBold(normT[4],statusT[4])/tdtdmakeBold(normT[5],statusT[5])/tdtd class\tablebg1\makeBold(normT[6],statusT[6])/td/tr;//渲染表格;$(#example tbody).append(html);}总结
Datatables是一直接触的jquery表格插件但仅限于项目部分功能的使用因此对该插件也是用到时学习满足了当前的需求就浅尝辄止了。但是随着同一个项目需求的不断变化反正Datatables带来的惊喜只有你没想到的功能没有它实现不了的需求。因而为此记 漏刻有时
