dataTables工做總結

時間 2019-11-30

標籤 datatables 總結简体版

原文原文鏈接

近期在工做中用到了dataTables,如今總結一下在工做中遇到的問題以及解決方法，若有不妥之處但願多多指教，定會改進。css

首先這裏用的是coloradmin框架，在vs環境下開發。html

這裏寫一個容器用於放值table：jquery

<div class="col-lg-12" id="dataTableDiv">

</div>

這裏是table,在運行時將會動態填充到dataTableDiv中，其中dataTbody將存放數據：ajax

<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>

這裏頁面加載時執行這個方法，拿到數據：app

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
                }
            });
        }

好了，接下來要重點說工做中遇到的問題了。框架

首先是複選框，dom

默認的複選框在這裏是這樣的，而如今需求是這樣的，因此就對複選框的樣式進行調整：ide

.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,url

當點擊時方法中傳一個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使用過程當中遇到的問題就沒了，之後在使用過程當中遇到會再次進行補充。