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

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

rdmrdm 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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    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

  • rdmrdm Posts: 194Questions: 55Answers: 4

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

Sign In or Register to comment.