Create table after page load

aboes81

I have a page with a table and would love to implement DataTables for pagination and sorting. The table gets populated from a service but only after the user enters some filters on the data. The user also gets to choose the columns that are returned.

All of the examples I could find involved using the $(document).ready event. Can I create the table on a button click event?

Note: I have tried doing this and haven't got it to work.

shredluc

I'm not sure how that page retrieves the data (ajax?). Does the page use jquery for anything itself? Does it return raw data or the table itself?

On some pages i have a table is retrieved through ajax and inserted directly into a div already formed. At the end of the ajax handler after the new table is put in i do a :
[code]
$("#outtable").dataTable( * various options here * );
[/code]
where the table comes back as:
[code]

.....
[/code]

aboes81

Do you define your columns in html? I've found that unless I define the columns before calling .dataTable() it doesn't work.

shredluc

I call dataTable on the DOM itself after modifying it. I am going to port to full ajax eventually.

Here is my call back:
[code]
var refresh = function(item, ref){
$.ajax({
url:'refreshurl?refresh',
cache: false,
success: function(msg){
if(oTable)
oTable.fnDestroy();
$(outputtbody).empty().append(msg);
oTable = $('#outtable').dataTable({
"bPaginate": false,
"bInfo": false,
"bRetrieve": true,
"bAutoWidth": false,
"sDom":'<"generalsearch"f>',
"aaSorting": [[8,'desc']],
'aoColumnDefs':[
{"bSortable":false, "aTargets":[0,3,4,5,6,7]},
]
});
}
});
};
[/code]

where outputbody is a tbody element like this:
[code]



Filter:
...




...





[/code]

Now you said you have a variable # of columns but i don't see why a whole table replacement wouldn't work in my crude style of doing things. Process your JSON or whatever you get, put it in the DOM and then call it on that. If your trying to pass the JSON straight to datatables, that may be the problem (thats a plain guess)

aboes81

I've tried something similar to that and it works if you define the columns in your in the but if you leave the empty it doesn't work.

I'll try something implementing it exactly as you have but with the empty or with dummy columns and see if that works.

aboes81

It worked! Thanks for your help.

You do have to define the table in the html first though. I just hid the div until the data is returned.