Refreshing with fnServerData - How does it get called?

Refreshing with fnServerData - How does it get called?

neuDev33neuDev33 Posts: 11Questions: 0Answers: 0
edited July 2012 in DataTables 1.9
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.

Replies

  • tja824tja824 Posts: 6Questions: 0Answers: 0
    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.
  • neuDev33neuDev33 Posts: 11Questions: 0Answers: 0
    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?
  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin
    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
  • neuDev33neuDev33 Posts: 11Questions: 0Answers: 0
    Thanks Allan, fnReloadAjax did exactly what I wanted!
This discussion has been closed.