Question

基本上有两个问题：

问题1：我有一个从API生成的动态表并相应地返回数据，我在数据表fnRowCallBack函数中包含了所有这些代码，并在那里完成所有表的工作。因此，此代码提取列名称并将其作为列定义放在datatable中。

现在我一直在调试，但无法找到为什么这些数据在第一列中添加空行，不仅因为随着数据量的增加，它会添加更多空行。请帮助解决这个问题。见下图以供参考。

（重要）问题2：目前我在数据表行table.fnSetColumnVis（1，false）中隐藏一行时收到错误;抛出异常说风格未定义。但是我看到几个例子表明这种方法很完美。

代码：

    if ($.fn.dataTable.isDataTable('#WorksheetTable')) {
                    $('#WorksheetTable').dataTable().fnDestroy();
                    $('#WorksheetTable').html("");
                }               
                var cols = [];
                var keys = Object.keys(json[0]);
                var sampleIds = json[2];

                $.each(keys, function(key, value) {
                    var col = { data: value, title: value }
                    cols.push(col);
                });


                var table = $('#WorksheetTable').dataTable({
                    bDestroy: true,
                    destroy: true,
                    buttons: [
                        'copyHtml5',
                        'excelHtml5',
                        'csvHtml5',
                        'pdfHtml5'
                    ],
                    iDisplayLength: 15,
                    dom: 'Bfrtip',                    
                    "searching": false,
                    "responsive": true,
                    "language": {

                    },
                    data: json,
                    columns: cols,                   
                    fnRowCallback: function(nRow, aData, iDisplayIndex) {
                        var col = -1;
                        $.each(aData, function(key, value) {
                            col++;

                            if (nRow._DT_RowIndex === 1) {
                                if (vm.WorksheetType === vm.WorksheetTypes.FILLING) {
                                } else
                                    $('td:eq(' + col + ')', nRow).attr("hidden", "hidden");
                            }
                            if (nRow._DT_RowIndex === 2) {
                                $('td:eq(' + col + ')', nRow).attr("hidden", "hidden");
                            }

                            if (key === "Jrk nr" || key === "Katsed" || key === "experimentTypeId" || key === "Tell nr") {
                                //if (key === "experimentTypeId")
                                //    $('td:eq(' + col + ')', nRow).attr("hidden", "hidden");

                            } else {
                                if (vm.WorksheetType === vm.WorksheetTypes.BITUMEN) {
                                } else {
                                    if (nRow._DT_RowIndex === 0) {
                                        if (value !== "")
                                            $('td:eq(' + col + ')', nRow).html(moment(value).format("DD.MM.YYYY"));
                                    }
                                }
                                var sampleId = sampleIds[key];
                                var experimentTypeId = aData.experimentTypeId;

                                switch (value) {
                                case "XoV":
                                    $('td:eq(' + col + ')', nRow).html("<img class='customicon-worksheet-status5' onclick='ttk.views.Worksheet.showExperiments(" + sampleId + ", " + experimentTypeId + ")'></img>");
                                    break;
                                case "X.v":
                                    $('td:eq(' + col + ')', nRow).html("<img class='customicon-worksheet-status4' onclick='ttk.views.Worksheet.showExperiments(" + sampleId + ", " + experimentTypeId + ")'></img>");
                                    break;
                                case "Xv":
                                    $('td:eq(' + col + ')', nRow).html("<img class='customicon-worksheet-status3' onclick='ttk.views.Worksheet.showExperiments(" + sampleId + ", " + experimentTypeId + ")'></img>");
                                    break;
                                case "X.":
                                    $('td:eq(' + col + ')', nRow).html("<img class='customicon-worksheet-status2' onclick='ttk.views.Worksheet.showExperiments(" + sampleId + ", " + experimentTypeId + ")'></img>");
                                    break;
                                case "X":
                                    $('td:eq(' + col + ')', nRow).html("<img class='customicon-worksheet-status1' onclick='ttk.views.Worksheet.showExperiments(" + sampleId + ", " + experimentTypeId + ")'></img>");
                                    break;
                                default:
                                    break;
                                }
                            }
                        });                              
                    }                 
                });

                table.fnSetColumnVis(1, false); // error row

示例JSON数据：

[{
    "Jrk nr": "",
    "experimentTypeId": "",
    "Katsed": "Sideaine mark",
    "Tell nr": null,
    "/Num00": "test",
    "/Num543": "test",
    "/Num2345": "test",
    "/33333": "mark 1",
    "TT-0018/2015/0019": "PMB 65/105-65"
}, {
    "Jrk nr": "",
    "experimentTypeId": "",
    "Katsed": "Fraktsioon",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": null,
    "experimentTypeId": null,
    "Katsed": null,
    "Tell nr": null,
    "/Num00": "50",
    "/Num543": "55",
    "/Num2345": "61",
    "/33333": "64",
    "TT-0018/2015/0019": "69"
}, {
    "Jrk nr": "1",
    "experimentTypeId": "236",
    "Katsed": "Penetratsiooni määramine EVS-EN 1426",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": "X",
    "/33333": null,
    "TT-0018/2015/0019": "XoV"
}, {
    "Jrk nr": "2",
    "experimentTypeId": "237",
    "Katsed": "Pehmenemistäpi määramine EVS-EN 1427",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": "X",
    "/Num2345": "X",
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "3",
    "experimentTypeId": "238",
    "Katsed": "Kinemaatiline viskoossus EVS-EN 12595",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": "X",
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "4",
    "experimentTypeId": "246",
    "Katsed": "Duktiilsuse tõmbejõu teim EVS-EN 13589",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": "XoV"
}, {
    "Jrk nr": "5",
    "experimentTypeId": "249",
    "Katsed": "Destillatsioonijääk ja õli destillaat   EVS-EN 1431",
    "Tell nr": null,
    "/Num00": "X",
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "6",
    "experimentTypeId": "252",
    "Katsed": "Tingviskoossus  2 mm ava EVS-EN 12846-1",
    "Tell nr": null,
    "/Num00": "X",
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "7",
    "experimentTypeId": "257",
    "Katsed": "Sõelajääk EVS-EN 1429 0,5 mm avaga sõelal ",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": "X",
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "8",
    "experimentTypeId": "258",
    "Katsed": "Sõelajääk EVS-EN 1429 0,5 mm avaga sõelal 7 päevasel hoiustamisel ",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": "X",
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": "9",
    "experimentTypeId": "275",
    "Katsed": "Nakkemääramine bituumeni ja kivimaterjali vahel  löögi meetodiga - Vialit-plaadi meetod EVS-EN 12272-3",
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": "X",
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": null,
    "experimentTypeId": null,
    "Katsed": null,
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": null,
    "experimentTypeId": null,
    "Katsed": null,
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": null,
    "experimentTypeId": null,
    "Katsed": null,
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}, {
    "Jrk nr": null,
    "experimentTypeId": null,
    "Katsed": null,
    "Tell nr": null,
    "/Num00": null,
    "/Num543": null,
    "/Num2345": null,
    "/33333": null,
    "TT-0018/2015/0019": null
}]

Answer 1

我已经解决了第二个问题的答案

table th:nth-child(2),
td:nth-child(2) {
  display: none;
}

这也适用于隐藏一列。请按照小提琴示例
http://jsfiddle.net/wajid_khilji/79gecw0L/44/

datatables未定义的样式和空行

1 个答案: