How to reinitialize a datatable
How to reinitialize a datatable
Minerva
Posts: 22Questions: 0Answers: 0
I have a dataTable that is populated without issue when the page loads. Very slick. Love clicking the column names to sort.
The wrinkle is... the user can specify a different date range, and I'd like to repopulate the dataTable at that point. I call the same function as when the page loads and attempt to repopulate the dataTable object. I am learning it is not so easy to blow away and reload the dataTable. I am doing this in PowerChart so I don't have a public facing page that I can show you. However, I'd be glad to provide additional code or information that may be helpful.
HTML:
[code]
Event ID
Date
Subject
Result
[/code]
NOTE: The #documents table populates fine (on the initial load of the page) without the THEAD and TBODY tags, if that is a clue to my puzzle.
.JS FILE:
[code]
var oTable = $('#documents').dataTable({
"aoColumns": [
{ "sTitle": "EventID", "bVisible": false },
{ "sTitle": "Date", "sWidth": "110px", "bSortable": true },
{ "sTitle": "Subject", "sWidth": "270px", "bSortable": true },
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true }],
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"aaSorting": [[1, 'desc']],
"bJQueryUI": false
});
[/code]
Currently I don't get an error but the dataTable does not repopulate.
Setting bServerSide to True put me in an endless loop ("DataTables warning: JSON data from server failed to load or be parsed. This is most likely to be caused by a JSON formatting error")
I am using jquery.dataTables.min.js version 1.8.1. I was hoping that setting bDestroy to True would put me on the right path but this is still vexing me. Thank you for any ideas.
The wrinkle is... the user can specify a different date range, and I'd like to repopulate the dataTable at that point. I call the same function as when the page loads and attempt to repopulate the dataTable object. I am learning it is not so easy to blow away and reload the dataTable. I am doing this in PowerChart so I don't have a public facing page that I can show you. However, I'd be glad to provide additional code or information that may be helpful.
HTML:
[code]
Event ID
Date
Subject
Result
[/code]
NOTE: The #documents table populates fine (on the initial load of the page) without the THEAD and TBODY tags, if that is a clue to my puzzle.
.JS FILE:
[code]
var oTable = $('#documents').dataTable({
"aoColumns": [
{ "sTitle": "EventID", "bVisible": false },
{ "sTitle": "Date", "sWidth": "110px", "bSortable": true },
{ "sTitle": "Subject", "sWidth": "270px", "bSortable": true },
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true }],
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"aaSorting": [[1, 'desc']],
"bJQueryUI": false
});
[/code]
Currently I don't get an error but the dataTable does not repopulate.
Setting bServerSide to True put me in an endless loop ("DataTables warning: JSON data from server failed to load or be parsed. This is most likely to be caused by a JSON formatting error")
I am using jquery.dataTables.min.js version 1.8.1. I was hoping that setting bDestroy to True would put me on the right path but this is still vexing me. Thank you for any ideas.
This discussion has been closed.
Replies
also, if you use bRetrieve: true, it doesn't initialize anything, only returns the Table as a JQuery object.
The datasource is XMLCclRequest(), which is XMLHttpRequest() as it is called by mPagesJS.
mPagesJS is a jquery library created for Cerner PowerChart (http://www.mpagesjs.org/)
[code]
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 ()
[/code]
In order to do this, you would need to run your JSON code, then create a Table object with the data (rather than filling in oTable.fnAddData) then run the intialization just once. After that you can use a range filtering plugin function. http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html
----
Did removing the bRetrieve not fix your existing code?
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.
Is using a datatable the wrong route here if I need to reload it and display new results? Maybe I should take a different route than a datatable? I love the column sorting and how the datatable looks/acts, but I have to be able to reload it with new results.
It seems like it should be so simple. All ideas welcome.
If I can provide any other detail, I'd be glad to. I wish I had a public facing page so I could provide a link.
The Mpages jquery library (mpagesjs) provides the xmlcclrequest object, which is its version of XMLHttpRequest.
Here is a bit more about it: http://plugins.jquery.com/plugin-tags/xmlcclrequest
Hope this helps. Would be glad to provide any information I can. I appreciate your time.
The mpagesjs library (which contains XMLCclRequest) is included in PowerChart at a level above my pages (in other words, it is not a .js file I include at the top of the html with the rest of the .js and .css file references). I am wondering if the code it contains will function/make any sense if I try to pull all my code to provide a link to you somewhere, or if it's so specific to PowerChart that it won't help to do so?
Maybe I'm coming at this from the wrong angle. Is it a bad idea to try to do what I'm trying to do with dataTables? It seems like a logical thing to do from my vantage point but my background is more Visual Basic. I had no idea attempting to repopulate a datatable would cause such excitement. All thoughts welcome.
Helper method that I add to datatables to be able to turn ona nd off processing indicator
[code]
/*
* 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]
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.
[code]
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;
}
[/code]
[code]
if (oTable != undefined) {
oTable.fnClearTable();
};
[/code]
One wrinkle that wasn't obvious... If you are using a dialog box to collect your new date parameters, its modal property can interfere with the firing of your function to repopulate the data table. Who knew?
Thanks everyone for your help and time on this. It is appreciated.
[code]
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:' }});
[/code]
This works for me and I now have real time recomputation of the rows, values, pagination, etc
Just don't forget to delete the existing rows from the table.
I do this after the call to fnDestroy.
Extension function
$.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;
}
};
On change handler
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);
}