Question

我遇到了正确呈现jQuery DataTable的问题。我正在从CSV数据源为我的表动态生成headers。从那里我只是添加CSV中的相应表格数据。

问题出在我打电话.row.add([data.Data[i]]);的地方。如果我包含[]对象周围的data.Data[i]括号 - 表格会被错误地呈现。（见下图）

Vs以上。

当我在检查DOM时，只删除[] headers是正确的，但data.Data未显示 - 。我发现jQuery错误Cannot read property 'nodeName' of undefined。

我还包含了来自传回的对象的DOM的图片。

题：

我的代码（下面）中是否有某些内容阻止我使用动态数据获得格式化表headers的正确所需输出？我也创造了一个小提琴 - 它有正确的输出，但由于某种原因它不起作用，请帮助fiddle

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

    });
};

jQuery DataTables添加动态标题和表格行没有显示

JavaScript代码：

1 个答案:

解决：