jQuery DataTables添加動態標題和表行未顯示

Question

我在正確呈現jQuery DataTable時遇到問題。 我正在從CSV數據源動態生成表格的headers 。 從那里，我只是從CSV添加相應的表數據。

問題出在我打電話給.row.add([data.Data[i]]); 。 如果我在data.Data[i]對象的周圍加上了[]括號，則表的顯示方式不正確。 （見下圖）

VS.

當我簡單地刪除[] ， headers是正確的，但是data.Data不顯示-檢查DOM時。 我發現Cannot read property 'nodeName' of undefined jQuery錯誤。

我還包括了從對象的DOM返回的圖片。

題：

我的代碼中（以下）缺少什么，使我無法獲得帶有動態數據的格式化表格headers的正確期望輸出？ 我還創建了一個小提琴-該小提琴具有正確的輸出，但是由於某種原因它不起作用，請幫助小提琴

JavaScript代碼：

 (function Launch() { //console.log("Inside the GET Call: "); $.get("/Home/CsvPath") .done(function (data) { data = $.parseJSON(data); var csvFilePath = data.FullPath; GetCsvData(csvFilePath); }); }()); function GetCsvData(csvFilePath) { //console.log("Inside the POST Call: "); $.post("/Home/ReadCsv", { csvFilePath: csvFilePath }) .done(function (data) { data = $.parseJSON(data); var formattedHeaders = []; $.each(data.Headers, function(e, f) { formattedHeaders.push({ "sTitle": data.Headers[e]}); }); var csvTable = $("#csvData-table") .DataTable({ "stateSave": false, "bFilter": false, "bInfo": false, "destroy": false, "paging": false, "lengthChange": false, "responsive": true, "columns": formattedHeaders }); csvTable.clear(); csvTable.draw(); console.log(data.Data); console.log(data) // var csvData = data; for (var i = 0; i < data.Headers.length; i++) { csvTable.row.add( data.Data[i] ) } csvTable.draw(); }); }; 

Answer 1

解決了：

問題是這樣的事實，取決於標題的數量，我的行中沒有足夠的數據。 這導致了DOM的錯誤-簡單的編輯和修復循環使我能夠獲得正確的結果。

(function Launch() {
//console.log("Inside the GET Call: ");

$.get("/Home/CsvPath")
    .done(function (data) {
        data = $.parseJSON(data);
        var csvFilePath = data.FullPath;
        GetCsvData(csvFilePath);
    });
}());


function GetCsvData(csvFilePath) {

//console.log("Inside the POST Call: ");

$.post("/Home/ReadCsv", { csvFilePath: csvFilePath })
    .done(function (data) {
        data = $.parseJSON(data);

        var formattedHeaders = [];
        $.each(data.Headers, function(e, f) {
            formattedHeaders.push({ "sTitle": data.Headers[e]});
        });

        var csvTable = $("#csvData-table")
            .DataTable({
                "stateSave": false,
                "bFilter": false,
                "bInfo": false,
                "destroy": false,
                "paging": false,
                "lengthChange": false,
                "responsive": true,
                "columns": formattedHeaders
            });

        csvTable.clear();
        csvTable.draw();

        csvTable.rows.add(
            data.Data
        );

        csvTable.draw();

    });
};