Reload datatable with new aoData

sdinesh21

Hey All,

I am using DataTables 1.9 and have a need to refresh my table with new aoData value on changing an option selector. The reloadTable() function shown below is placed outside the document.ready function.

1. When I use oTable.fnDraw(), the request is sent twice to the server, with aoData value of monitorAlertList & researchAlertList() in the example beow.
2. When I use oTable.fnReloadAjax() in the same line, it throws an error that it is not a function.

Please review and advise on both approaches. Thanks in advance!

[code]
var iCount;
var viewList= "monitorAlertList";

oTable = $('#alertTable').dataTable( {
"sScrollY": "300",
"oScroller": {
"loadingIndicator": true
},
"sAjaxSource": "/grip/mobile/mobile",
"bServerSide": true,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "requestType", "value": viewList } );

},
"sDom": "RfrtS",
"bSearchable": true,
"bSort": true,
"bFilter": true,
"sServerMethod": "GET",
"bStandingRedraw" : true,
"aaSorting": [[0,'desc']],
"aoColumnDefs": [
{ "sTitle": "Time UTC", "aTargets": [ 0 ], "sName": "time", "mData": "time" , "bVisible": true},
{ "sTitle": "Type", "aTargets": [ 1 ],"sName": "type", "mData": "type" , "bVisible": true},
{ "sTitle": "Severity", "aTargets": [ 2 ], "sName": "severity", "mData": "severity" , "bVisible": true},
{ "sTitle": "Subject", "aTargets": [ 3 ], "sName": "subject", "mData": "subject" , "bVisible": true},
{ "sTitle": "User Name", "aTargets": [ 4 ], "sName": "userName", "mData": "userName" , "bVisible": true},
{ "sTitle": "Description", "aTargets": [ 5 ], "sName": "message", "mData": "message" , "bVisible": false}
],
"fnDrawCallback": function ( oSettings ) {
iCount = oSettings.fnRecordsTotal();
$("#iTotal").html(iCount);
}
}
);

function reloadAlertTable()
{
var selectedView = $("#alertViewsList option:selected").val();
if (selectedView == 0)
{
viewList= "monitorAlertList";
oTable.fnSetColumnVis( 5, false );
}
else if (selectedView == 1)
{
viewList= "researchAlertList";
oTable.fnSetColumnVis( 5, true );
}
oTable.fnDraw(false);
}
[/code]

psharp

[quote]sdinesh21 said: The reloadTable() function shown below is placed outside the document.ready function.[/quote]

is oTable a global var? If you place that function outside of the document ready, the scope of it is lost.

sdinesh21

oTable is not a global variable. I just tried making it a global variable and calling fnReloadAjax() but it still says "oTable.fnReloadAjax is not a function".

psharp

[quote]sdinesh21 said: 2. When I use oTable.fnReloadAjax() in the same line, it throws an error that it is not a function.
[/quote]

This might sound silly, but.. did you include the api plugin code for fnReloadAjax() ??

It can be found on this page:
http://datatables.net/plug-ins/api

sdinesh21

Thanks for pointing out the silly one! :) fnReloadAjax() works now!

However, could you please clarify why I still see two requests for the following function? When I comment out oTable.fnReloadAjax(), there is only one server request sent which does the job. Does modifying aoData and changing column visibility send a server request?

[code]
function reloadAlertTable()
{
var selectedView = $("#alertViewsList option:selected").val();
if (selectedView == 0)
{
viewList= "monitorAlertList";
oTable.fnSetColumnVis( 5, false );
}
else if (selectedView == 1)
{
viewList= "researchAlertList";
oTable.fnSetColumnVis( 5, true );
}
oTable.fnReloadAjax();
}
[/code]

Thanks for your time!

psharp

I am seeing similar behaviour with the datatables. When the object is initially created, it sends a request to the controller, which returns back the data ( in the natural order with no sort). The controller immediately gets a second request but with a sorting order set on the first column.

My guess is that the datatables control is setting that sort order, which causes it to refresh the data. It only happens when the datatables is initialized so it really wasn't a big issue for us.

That said, it simply explains that I have similar behaviour. I can't see anything in your above code that would cause this, unless the fnReloadAjax does this when it sees a new ajax datasource.

I will append this comment if I find anything definitive for you.

[edit]
after reviewing the details of fnSortNeutral (on the same api page) it could be that it's the behaviour of the control to do this.
[quote]
This function will restore the order in which data was read into a DataTable (for example from an HTML source). Although you can set aaSorting to be an empty array ([ ]) in order to prevent sorting during initialisation, it can sometimes be useful to restore the original order after sorting has already occurred - which is exactly what this function does.
[/quote]

If I have time today, I'll take a look at ways to prevent having the controller called 2 times during the initializing of the datatables object.

sdinesh21

Hi psharp, please let me know if you could find some time to look into this. For now, I have commented out fnReloadAjax() as the fnSetColumnVis itself sends out a server request because of the sorting as you have mentioned.