DataTables

What is your data source?

also, if you use bRetrieve: true, it doesn't initialize anything, only returns the Table as a JQuery object.

entire code routine:

function DocumentsTable(fromDate, toDate) {
	
	if (fromDate !== 0) {
		// if we are working with dates, make them date data type instead of strings: 
		var documentFrom = new Date(fromDate);
		var documentTo = new Date(toDate);
	}
	else {
		// put the vanilla zeroes into the documentFrom, documentTo variables this routine uses: 
		var documentFrom = 0;
		var documentTo = 0;
	};

	// Initialize the request object: 
	var DocumentInfo = new XMLCclRequest();
	
	// When our request object has changed: 
	DocumentInfo.onreadystatechange = function () { 

		if (DocumentInfo.readyState == 4 && DocumentInfo.status == 200) {

    		// Convert returned string to JSON object (eval): 
	        var msgDoc = DocumentInfo.responseText;
	        if (msgDoc !== undefined && msgDoc !== null) {
	            var jsonDoc = eval("(" + msgDoc + ")");
	        }
	        
			if (jsonDoc && jsonDoc.DATAREC.LIST) {
				
	                    var oTable = $("#documents").dataTable({
	                    "aoColumns": [
				            { "sTitle": "EventID", "bVisible": false},
				            { "sTitle": "Date", "sWidth": "110px", "bSortable": true},
				            { "sTitle": "Subject   (click any column name to sort)", "sWidth": "270px", "bSortable": true},
				            { "sTitle": "Result", "sWidth": "100px", "bSortable": true}
			            ],
	                    "bProcessing": true,
	                    "bDestroy": true, 
	                    "bPaginate": false, 
	                    "bAutoWidth": false,
	                    "bFilter": false,
	                    "bInfo": false, 
	                    "aaSorting": [[1, 'desc']], 
	                    "bJQueryUI": false 	 
	                    }); // end var oTable definition

			// append each row to the oTable datatable: 
	        	for (var i = 0; i < jsonDoc.DATAREC.LIST.length; i++) {

				oTable.fnAddData([	                    		
				 //event_ID is not visible to the user: 
				 jsonDoc.DATAREC.LIST[i].EVENT_ID,								
				 jsonDoc.DATAREC.LIST[i].EVENT_DT,
				 jsonDoc.DATAREC.LIST[i].EVENT_TITLE_TEXT,
				 jsonDoc.DATAREC.LIST[i].EVENT_RESULT			
				]);
	        	}  // end for loop	                  	
	                  	
	        }  //end if (jsonDoc &&...   

		else
		// We don't have any data to work with: 
		{ $('#documents').html('No Documents Found')}
	
	    };  //end if (DocumentInfo.readyState === 4 &&... 
	
	}   //end DocumentInfo.onreadystatechange  

	// Call the ccl progam and send the parameter string: 
	DocumentInfo.open("GET", "MPAGE_DOC");
	
	if (documentFrom === 0) {
		// the initial trip through, we pass in zeroes instead of dates: 
		DocumentInfo.send("^MINE^, value($VIS_Encntrid$), value($PAT_Personid$), ^0^,^0^");
	}
	else 
	{
		// user has selected dates so format them for the CCL request: 
		DocumentInfo.send("^MINE^, value($VIS_Encntrid$), value($PAT_Personid$), ^" + documentFrom.format('mmddyyyy') + "^,^" + documentTo.format('mmddyyyy') + "^");
	};	
	return;
		
} //end DocumentsTable ()                                                      

Unfortunately the initial data is not the entire set. This could potentially be a very large set of documents, so we're initially returning the top 50. The date range filter will likely be used if the user wants to go much farther back in the patient's history.

Removing bRetrieve did not alter how the code runs.

I'm really stumped on this one. Should I look into returning the entire set and then applying a filter on it for display? Is there really no way to wipe the dataTable out and start over? I'm willing to try anything at this point.

Thank you for your help.

when I get a chance later today, I'll try to set up your code and see what I can find.

Can you provide a link to your project, or clue me in as to what xmlcclrequest is all about? I installed the library but since I don't know what it does, I don't know how to negotiate the errors to get things set up so I can get your code going.

You've got a lot of weird custom stuff in there (Date.format() which I was able to find, and anchor.click() inside the xmlcclrequest.js code which I don't know what this refers to) I can't run the code. it would be best if I could get a link to your project.

Not familiar with the exact jquery stuff you are using but I have a table that I reinit and repopulate with new json data from the backend as a result of new search criteria. The following are the important peices of it.

Helper method that I add to datatables to be able to turn ona nd off processing indicator

/*
 * Register a new feature with DataTables
 */
if ( typeof $.fn.dataTable == "function" &&
     typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
     $.fn.dataTableExt.fnVersionCheck('1.7.4') )
{
	$.fn.dataTableExt.oApi.fnProcessingIndicator = function ( oSettings, onoff )
	{
		if( typeof(onoff) == 'undefined' )
		{
			onoff=true;
		}
		this.oApi._fnProcessingDisplay( oSettings, onoff );
	}
	
	$.fn.dataTableExt.oJUIClasses.sProcessing="dataTables_processing ui-state-highlight";
	
}
else
{
	alert( "Warning: SearchForm requires DataTables 1.7.4 or greater - www.datatables.net/download");
}

Code that hooks to the jquery XMLHttpRequest event handlers for pre and post processing that handle table reset and population. The key part for reseting the datatable is the call to fnClearTable.

	function processData(data)
	{
		//clear the table again in the case of a double submit
		datatable.fnClearTable();
		//add data to table
		datatable.fnAddData(data);
		//turn off processing indicator
		datatable.fnProcessingIndicator(false);
	}
 	
  // pre-submit callback 
  function preRequest(formData, jqForm, options) { 
    	//turn on procesing indicator
	datatable.fnProcessingIndicator(true);
	//clear table
    	datatable.fnClearTable();
	return true; 
  } 

Found this solutions that worked perfect <a href='http://datatables.net/api'>Click</a>;

This works:

var oTable = $('#tableID').dataTable();
oTable.fnDestroy();

//I put in new values 'newList' on the body
$('#tableID tbody').html(newList);

//I reinitialize the datatable
$('#tableID').dataTable({"oLanguage": { "sSearch": 'Search Contacts:' }});

This works for me and I now have real time recomputation of the rows, values, pagination, etc

If you have server side data, this is the only working solution:

Extension function
<pre>

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myX1, myX2 )
{
if ( oSettings.oFeatures.bServerSide ) {
oSettings.aoServerParams = [];
oSettings.aoServerParams.push({"sName": "user",
"fn": function (aoData) {
aoData.push(
{"name": "myX1name", "value": myX1},
{"name":"myX2name", "value": myX2}
);
}});

this.fnClearTable(oSettings);
this.fnDraw();
return;
}
};

</pre>

On change handler

<pre>

if (oTable == null) {
oTable = $(".items").dataTable({
"bServerSide": true,
"sAjaxSource": "/someapp/pagename",
"sServerMethod": "POST",
"fnServerParams": function ( aoData ) {
aoData.push(
{"name": "myX1name", "value": myX1},
{"name":"myX2name", "value": myX2}
);
}
});
}else{
oTable.fnReloadAjax(oTable.oSettings, supplier, val);
}

</pre>