Is there a way to create a dynamic table using ajax data?

rdm

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.
}
});
}

kthorngren

Start with this FAQ. Use columns.title to 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

rdm

Thanks for the tip. I was hitting a brick wall.