dataTables工作总结
近期在工作中用到了dataTables,现在总结一下在工作中遇到的问题以及解决方法,如有不妥之处希望多多指教,定会改进。
首先这里用的是coloradmin框架,在vs环境下开发。
这里写一个容器用于放值table:
<div class="col-lg-12" id="dataTableDiv"> </div>
这里是table,在运行时将会动态填充到dataTableDiv中,其中dataTbody将存放数据:
<script id="TableTemplate" type="text/x-jquery-tmpl"> <table class="table" id="dataTable"> <thead> <tr style="height:30px;"> <th width="70">序号</th> <th width="100">类型</th> <th width="100">标准编号</th> <th width="100">等级</th> <th>来源</th> <th width="100" class="report-check">报表选项</th> <th width="130">报警对象</th> <th width="90">标准值</th> <th width="90">报警值</th> <th width="120">深度(m)</th> <th width="100">对策</th> <th>备注</th> </tr> </thead> <tbody id="dataTbody"></tbody> </table> </script>
这里定义一个行模板,根据数据中对象的字段名来取值,其中checkbox在框架中遇到一些问题,下面会细说:
<script id="TrTemplate" type="text/x-jquery-tmpl"> <tr style="text-align:left;"> <td>${xuhao}</td> <td>${Type}</td> <td>${Code}</td> <td> {{if Level==3}} <span style="color:red;">高风险</span> {{else Level==2}} <span style="color:orange;">中风险</span> {{else Level==1}} <span style="color:yellow;">低风险</span> {{else}} <span style="color:green;">安全</span> {{/if}} <input type="hidden" value="${ID}" id="${ID}" /> </td> <td>${RiskSource}</td> <td style="padding-left:30px;" class="report-check"> <div class="col-md-2 col-lg-2 checkbox checkbox-css"> <input type="checkbox" value="" id="check${ID}" onclick="choose(${ID})" /> <label for="check${ID}"></label> </div> </td> <td>${WarnObject}</td> <td>${StandardValue}</td> <td>${WarnValue}</td> <td> {{if Depth!=null}} ${Depth/1000} {{/if}} </td> <td></td> <td>${Note}</td> </tr> </script>
这里页面加载时执行这个方法,拿到数据:
function GetPitRiskList(date) {
//页面编辑提交按钮 $(".edit-submit span:first-child").css("color","rgb(204, 204, 204)"); $(".edit-submit").hide(); //获取报表日期 $("#fengxianDate").html(date); $.ajax({ url: '****************', type: '***', dataType: '***', data: { ************ }, cache: false, success: function (data, textStatus, xhr) {var i = 1; var level1 = 0; var level2 = 0; var level3 = 0; for (var o in data) { data[o].xuhao = i++; if (data[o].Level == 3) { level3++; } else if (data[o].Level == 2) { level2++; } else if (data[o].Level == 1) { level1++; } } DestroyDataTable("#dataTable"); $("#dataTableDiv").empty(); $("#TableTemplate").tmpl().appendTo("#dataTableDiv"); $("#TrTemplate").tmpl(data).appendTo("#dataTbody"); //CreateDataTable("#dataTable"); $("#dataTable").dataTable({ "language": { "url": "/Scripts/Chinese.txt" }, "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumnDefs": [ { "aTargets": [5], "bVisible": false }] }); $("#Level1Btn").html("低风险" + level1); $("#Level2Btn").html("中风险" + level2); $("#Level3Btn").html("高风险" + level3); allPitRiskList = data; $("#LevelDiv button").removeClass("btn-border-radius"); $("#ShowAllLevel").addClass("btn-border-radius"); // data: 高风险data var categoriesArr = new Array(); for (var o in data) { if ($.inArray(data[o].Type, categoriesArr) == -1) { categoriesArr.push(data[o].Type); } } var Level1Arr = new Array(); var Level2Arr = new Array(); var Level3Arr = new Array(); for (var i = 0; i < categoriesArr.length; i++) { Level1Arr.push(0); Level2Arr.push(0); Level3Arr.push(0); } for (var o in data) { var xiabiao = $.inArray(data[o].Type, categoriesArr); if (xiabiao >= 0) { if (data[o].Level == 3) { Level3Arr[xiabiao]++; } else if (data[o].Level == 2) { Level2Arr[xiabiao]++; } else if (data[o].Level == 1) { Level1Arr[xiabiao]++; } } } drawChart(categoriesArr, Level1Arr, Level2Arr, Level3Arr); // $("#selListDiv").click(); }, error: function (xhr, textStatus, errorThrown) { //called when there is an error } }); }
好了,接下来要重点说工作中遇到的问题了。
首先是复选框,
默认的复选框在这里是这样的,而现在需求是这样的
,所以就对复选框 的样式进行调整:
.checkbox.checkbox-css label:before { width: 10px !important; height: 10px !important; border-radius: 0px !important; border: 1px solid #fff !important; cursor: pointer; } .checkbox.checkbox-css input:checked + label:before { background: none !important; border: none !important; border-color: none !important; }
然后是使用选择中取消和取值时,由于使用了伪类再加上框架对checkbox已经定义过,所以在使用过程中点击选择样式上达到了效果,却不能在判断:checked=true,正个过程中无论dom取值,还是jquery:checked=true判断,还是在databales中data判断都始终时false,
当点击时方法中传一个id,然后循环table,当id相等时,将input标签的value=""替换成'value="" checked="checked"',当然取消选中就是将 'value="" checked="checked"'替换成value="",由于我们是多模块取值,所以我定义了一个全局变量,在选中的同时添加或删除值,
这里只说一下删除值,dataList.splice(i,1);意思是删除下标为i的一项。上代码:
function choose(id){ $("#dataTable").DataTable().rows().data().each(function (data, index, rows) {//循环tabale(不是一页的数据,而是全部数据) var RiskID=$(data[3])[2].value; if(RiskID==id){ if($(data[5]).find("input")[0].checked==true){ data[5] = data[5].replace('checked="checked"',''); $("#dataTable").DataTable().row(index).data(data); for (var i=0;i<DataList.length;i++){ if (DataList[i].RiskID==RiskID){ DataList.splice(i,1); } } }else{ data[5] = data[5].replace('value=""', 'value="" checked="checked"'); $("#dataTable").DataTable().row(index).data(data);//将行取出改变后再赋进去 } if($(data[5]).find("input")[0].checked==true){//如果是选中而不是取消就拿值 var obj={ "RiskID":$(data[3])[2].value, "ModleType":data[1], "StandardCode":data[2], "RiskLevel":$(data[3])[0].innerText, "RiskSource":data[4], "WarnObject":data[6], "StandardValue":data[7], "WarnValue":data[8], "DigDepthValue":data[9], }; DataList.push(obj); } } }); }
最后一个就是databales列隐藏显示的问题,隐藏有两种方式:
一种是初始化时候:
$("#dataTable").dataTable({ "language": { "url": "/Scripts/Chinese.txt" }, "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumnDefs": [ { "aTargets": [5],//目标列 "bVisible": false//是否隐藏,false隐藏 }] });
另一种就是:
$("#dataTable").dataTable().fnSetColumnVis(5, false,false );
其中5代表目标列,第一个false是隐藏,第二个是不重绘表格,如果为true则会出现重复数据覆盖数据问题,具体为什么会这样未知,
到此在工作中对datatables使用过程中遇到的问题就没了,以后在使用过程中遇到会再次进行补充。