[英]jQuery DataTables adding dynamic headers and table row's not showing
I am having an issue with rendering my jQuery DataTable
correctly. 我在正确呈现
jQuery DataTable
时遇到问题。 I am dynamically generating the headers
for my table from a CSV Data source. 我正在从CSV数据源动态生成表格的
headers
。 From there I am just adding the corresponding table data from the CSV. 从那里,我只是从CSV添加相应的表数据。
The issue is in where I am calling .row.add([data.Data[i]]);
问题出在我打电话给
.row.add([data.Data[i]]);
. 。 If I include the
[]
brackets that surround my data.Data[i]
object -- the table is rendered incorrectly. 如果我在
data.Data[i]
对象的周围加上了[]
括号,则表的显示方式不正确。 (see picture below) (见下图)
Vs. VS.
When I simply remove the []
the headers
are correct but then the data.Data
does not show - when inspecting the DOM. 当我简单地删除
[]
, headers
是正确的,但是data.Data
不显示-检查DOM时。 I find a jQuery
error of Cannot read property 'nodeName' of undefined
. 我发现
Cannot read property 'nodeName' of undefined
jQuery
错误。
I have also included a picture from the DOM of the object that is getting passed back. 我还包括了从对象的DOM返回的图片。
Is there something that I am missing in my code (below) that is preventing me from having the correct desired output of formatted table headers
with dynamic data? 我的代码中(以下)缺少什么,使我无法获得带有动态数据的格式化表格
headers
的正确期望输出? I have also created a fiddle - which has the correct output but for some reason it is not working, please help fiddle 我还创建了一个小提琴-该小提琴具有正确的输出,但是由于某种原因它不起作用,请帮助小提琴
(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(); }); };
The issue was the fact that there was not enough data in my rows depending on the number of headers. 问题是这样的事实,取决于标题的数量,我的行中没有足够的数据。 Which was causing the error within the
DOM
- a simple edit and fixing the loop allowed me to achieve the correct result. 这导致了
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();
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.