Is there a way to create a dynamic table using ajax data?
Is there a way to create a dynamic table using ajax data?
rdm
Posts: 194Questions: 55Answers: 4
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I've done a search for this problem, but the problem is that all the examples show the columns already defined. In my case, a completely different table can be returned, depending on the click event. By different table, I mean a completely different set of columns and rows.
Do any examples exist for the dynamic creation of an _entire _table using DataTables, not just filling the rows?
Here is the relevant jQuery function that I'm trying to hook up with the empty table.
function populateDetail(coordinates) {
$.ajax({
url: url4,
type: "POST",
data: {
Campus: $("#Campus").val(),
Coordinates: coordinates
},
dataType: "json",
success: function (data) {
$("#DetailTable").empty();
// populate table from returned "data" which is returned as a Json object.
}
});
}
This question has an accepted answers - jump to answer
Answers
Start with this FAQ. Use
columns.titleto define the headers. One option is to derive the columns names from the object keys of the row data, like this example:https://live.datatables.net/huyexejo/1937/edit
Or you can return a separate object with the column definitions.
Use
destroy()then reinitialize Datatables with the new column definition. See the example in the docs.Use
DataTable.isDataTable()to see if the Datatable exists before destroying it to avoid Javascript errors.Kevin
Thanks for the tip. I was hitting a brick wall.