Datatable not working on dynamically generated html table
Datatable not working on dynamically generated html table
manoja
Posts: 6Questions: 3Answers: 0
Hello,
I have generated a table dynamically using Jquery and trying to display the JSON data in the table. I am creating the table dynamically in Jquery with <thead> and <tbody> tags and trying to initialize a datatable. When i run the code. It doesn't display me the table and i dont see any error.
This is my Jquery code where i dynamically created a table
$("div#tabs").append(
"<div id='tabs" + i + "'><div id='tablediv" + i + "'><table id='table0' class='display' cellspacing='0' width='100%'><thead><tr><th></th><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead><tbody></tbody></table></div</div>" );
AJAX Request to display the data in Datatable:
$.ajax({
type: "GET",
url: "Controller/Action",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data !== null && data.length > 0) {
var tableData = JSON.parse(data);
$("#table0").DataTable().destroy();
$("#table0").DataTable({
dom: "Bfrtip",
data: tableData,
columns: [
{
className: 'select-checkbox',
orderable: false,
data: null,
defaultContent: '' "
},
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn." },
{ data: "start_date" },
{ data: "salary" }
],
rowReorder: {
dataSrc: 'DT_Rowid'
},
select: {
style: 'os',
selector: 'td:first-child'
}
, buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
}
},
error: function Error(result, error) {
alert("error " + result.status + " " + result.statusText);
}
});
}
});
Sample Data:
{
"data": [
{
"DT_RowId": "row_1",
"name": "Nixon",
"position": "System Architect",
"office": "Edinburgh",
"extn": "5421",
"start_date": "2011-04-25"
"salary": "320800",
},
{
"DT_RowId": "row_2",
"name": "Winters",
"position": "Accountant",
"office": "Tokyo",
"extn": "8422",
"salary": "170750",
"start_date": "2011-07-25"
},
The html table has been successfully created and I am able to load my Json data from ASP.net controller method into the 'data: tabledata'. But the datatable is not getting initialized and i am not able to see the datatable and data loaded into it.
Thanks!
Answers
Since you are using
datainstead ofajaxDatatables doesn't look for the data in thedataobject. Try this:Kevin
Hey Kevin,
That didn't solve my problem. When i defined my table template
"
" in .cshtml file. I was able to see the table and data successfully. But when i tried creating the table dynamically in Jquery just like in the initial post. I couldn't see the table.
Do you get any errors?
Have you tried using
console.log(tableData)to see what it contains in the ajax success function?Can you post a link to your page or an example showing the issue?
Kevin
Hey Kevin, I dont think the issue is with the tableData. I am able to successfully get the json data and i don't see any error. I suspect that the datatable is not able to find the "table0" that i created in jquery. So i used $("table#table0").Datatable({}); and it worked.
Thanks for your help kevin!