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使用过程中遇到的问题就没了，以后在使用过程中遇到会再次进行补充。