Pass dynamic html table definition to DataTables

radi8

I am just beginning the use of the DataTables API, and I have a situation that I need assistance with.

I am retrieving a JSON from the server in a specific format similar to the following:
[code]
{data
0: 6 // number of elements in the JSON
1:{
name: [name]
Address1: [address1]
Address2: [address2]
City: [City]
State: [State]
zip: [zip]
}
2:{
name: [name]
Address1: [address1]
Address2: [address2]
City: [City]
State: [State]
zip: [zip]
}
...
}
[/code]

I can create the HTML table from the JSON , but can I pass the table HTML to the DataTables API directly? If so, how? If not, is there another method to get this data into the DataTables API? The formatting of the JSON is standardized and not easily changed.

girishmr

You can just load the data as given below
[code]



$('#example').html(data)

[/code]

radi8

Ok, i get that but will the DataTables API initialize on the table? Do I need to bind the table to the DataTables after rendering?

girishmr

Assuming you are loading the dynamic HTML into a div, on document ready just init the table as you normally do.

radi8

yep, newb question... thanks for the help. got it now.

dci

Is there a way to dynamically create the HTML from within a fnServerData possibly using json data passed from the server?

[code]
$(document).ready(function () {
var oTable = $('#dataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "/ChartTable/GetData",
"bProcessing": true,
"bRetrieve": true,
"fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData, function (json) {
BuildTable(json);
fnCallback(json);
});
}
});
};
[/code]

The BuildTable function processes the json into an html string like the following and performs a JQuery .html call on a into which the processed html string should be rendered.

[code]ItemQuantityCodeDescription[/code]


The idea being that the json string available from within fnServerData could be passed from the server such that it contains all column info necessary to generate the above HTML string. We could then render the html table and apply DataTables to the dynamically generated without having to round trip to the server 2 separate times to get table/column definitions and data.