CODEWITHSUNDEEP
javascriptdatatables
Wajid Khilji
Wajid Khilji

Reputation: 33

datatables undefined style and empty rows

Basically there are two questions:

question 1: I have a dynamic table that is generated from API and returns data accordingly, I have surround all of this code within datatables fnRowCallBack function and doing all of table works there. So this code extracts column names and place these as columns definition in datatable.

Now I have been debugging and could not found why this data adds empty rows in first columns, not only that it adds more empty rows as number of data increases. Please help in this regards. see image below for reference.

(Important) question 2: currently I am getting an error on hiding one row in datatable line table.fnSetColumnVis(1, false); throws exception saying style is undefined. However I have seen several examples showing this works perfectly.

Image shows Empty rows Image shows actual data in csv format

Code: 

    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

Sample JSON Data:

[{
    "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
}]

Upvotes: 1

Views: 960

Answers (1)

Wajid Khilji
Wajid Khilji

Reputation: 33

I have resolved the answer to the 2nd question

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

This also works well for hiding one column. Please follow the fiddle example
http://jsfiddle.net/wajid_khilji/79gecw0L/44/

Upvotes: 0

Related Questions