Refreshing with fnServerData - How does it get called?
Refreshing with fnServerData - How does it get called?
neuDev33
Posts: 11Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
[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.
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