Refreshing with fnServerData - How does it get called?

neuDev33

I've spent the morning searching the DataTables forums on learning how to refresh my DataTable, while I found out that fnServerData is what I need to use, I cannot figure out how. I have a filters panel, and when the user selects some filters, I want to pass those filters as parameters to the controllers Action i will be calling that will return the JSON to me.

So, while I've written -
oTable = $('#headTable').dataTable({
"bProcessing": true,
"sAjaxSource": '@Url.Action("GetData", "Grid")',
"sAjaxDataProp": "",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push( { "name": "startDate", "value" : "" });
$getJSON( sSource, aoData, function(json) {
fnCallback(json)
});
},
"bPaginate": false,
bJQueryUI: true,
"bSortClasses": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "single",
"aButtons": []
},
"aoColumns": [
{ "mDataProp": "NoteID" },
{ "mDataProp": "Date" },
{ "mDataProp": "Identifier" },
{ "mDataProp": "Name" },
{ "mDataProp": "Title" },
{ "mDataProp": "Subject" },
{ "mDataProp": "Author" },
]
});
}

I'm not sure how/when the fnServerData will get called. I need to call it explicitly, when someone selects a filter. So, how do I pass it values for sSource, aoData, etc? I've spent a good amount of time looking this up, and seems like a good time to ask the more experienced folks.

tja824

I use the following code to refresh data in my (already populated) table:

[code]
var data = getDTData(); //returns JSON array representing the table data

$('#dataTable').dataTable().fnClearTable();
$('#dataTable').dataTable().fnAddData( data.data );
[/code]


If all I am trying to do is apply a filter (in this case to show only 'OPEN' records if the 'showOpenOnly' checkbox is checked), I use the afnFiltering plugin :

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( aData[4] == "OPEN") {
return true;
}
else if (showOpenOnly) {
return false;
}
return true;
}
);
[/code]

then I use this bit of code to populate my showOpenOnly global variable and call the redraw of the table (applying the filter).

[code]
// add an event listener for the checkbox to redraw the table
$('#showOpenCheckBox').change (
function () { showOpenOnly = $(this).is(":checked");
$('#dataTable').dataTable().fnDraw();
}
);

$('#showOpenOnly').trigger('change');
[/code]

Hope that helps.

neuDev33

The first method you showed worked perfect! Thanks! I'd like to try the filtering capability as well, it seems like a more efficient way to filter as opposed to loading data again.
I guess the question I still have in my mind then is, that what is the use of fnServerData id refresh can be achieved by fnClearData+fnAddData?

allan

Have you taken a look at the fnReloadAjax plug-in which will call the server to get data for the table again: http://datatables.net/plug-ins/api#fnReloadAjax .

Allan

neuDev33

Thanks Allan, fnReloadAjax did exactly what I wanted!