click a button to load data

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:

$(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)
			} );
		}
	} );
});

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