click a button to load data

milesmiles55

hello, i've been working on this issue the last few days and i'm stumped.

i'm trying to load data via a jquery click event attached to a button. i'm able to load the data but, when the button is clicked and while in process, the old data becomes askewed and the styles seem to be disabled until after the process is finished...then all is fine. seems like it's happening the instant that i click the button. i've also tried with a checkbox and the same issue occurs. what is causing this?

i've tried used fnDraw and fnClearTable but, nothing seems to work.

i'm using a java server side implementation and rolling the data into json format. i'm using the following for the click/load:

[code]
$(document).on('click', '#button', function () {
$('#example').dataTable( {
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "projects",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "more_data", "value": "my_value" } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
} );
});
[/code]

what is causing the skewed css/style rendering of the data?

allan

> "bDestroy": true

You are destroying the table every time. Is there a reason for that? Can you not just call fnDraw in your click handler?

The destroy is why the table appears to return to its unstyled state - because it is - it is being destroyed and then recreated.

Allan

milesmiles55

i should have mentioned that initially data is shown and when the button is clicked i replace the 'old' data with new data in the same table. i thought bDestroy was appropriate in the situation because i want to destroy or get rid of the old data before the new data is populated into the table?

milesmiles55

i ended up using fnAjaxReload.