How to send different parameters to server side on different callbacks.

l2mz

Hi, Guys

I have a few drop down lists on the page and a display button, when click the button, the dropdown list values would be sent back to server side and get data back to display via datatables API.

the first time the data is displayed correctly. then I change the dropdown list settings and try to get a new data back. the datatables just show the same data.

I found from the website that i need fnReloadAjax to reload new parameters from client side, howerver I do not know how to do it.

Could someone throw an example.

thanks

jtb2

Sorry this is late but I couldn't find everything I needed in one post so I thought I would post my solution for everyone. It isn't necessary to call fnReloadAjax, just fnDraw after passing your updated parameters to fnServerParams that you declare in your initial DataTable settings. In my scenario, three server parameters change based on the options a user selects from three select menus with onchange events that call my function fnGetDataTable -

[code]
...
/* oServerParams, oSettings, $oTable, vars etc. declared outside this function */
function fnGetDataTable() {

oServerParams = { /* update with user selected values */
"myVar1": myVar1,
"myVar2": myVar2,
"myVar3": myVar3
};

/* if datatable already instantiated, send new parameters to server */
if ($.fn.DataTable.fnIsDataTable(document.getElementById('myDataTableID')))
{
$oTable._fnServerParams(oSettings.aoData);
$oTable.fnDraw(); /* reload data from server */
}
else{ /* otherwise instantiate datatable here */

$oTable.dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bServerSide": true,
"sAjaxSource": "myDataSource.ashx",
"aoColumns": aoColumns,
"sScrollY": "500px",
"bDeferRender": true,
"bAutoWidth": false,
"fnServerParams": function (aoData) { /* pass custom variables to server */
for (var p in oServerParams) {
aoData.push({ "name": p, "value": oServerParams[p] });
}
},
"fnInitComplete": fnPostRender,
"sDom": 'C<"clear">frtiS', /* scroller and column vis plugins */
"bStateSave": true
});

oSettings = $oTable.fnSettings();
}
}
...
[/code]

velat

I have the same situation.

solution is to get data from server. At first search, it gets data and information is displayed on the client.
Once end user change search options, additional parameter values remains unchanged from first search in fnServerParams
I tried using fnDraw() and fnReloadAjax, but they are not updating new parameter values.

Any help on sending new parameter values is highly appreciated.

velat

ok. After working for hours, i guess I finally got a solution.

fnServerParams should be using new parameter values each time it sends parameter values to server. OR atleast it can have an option whether to reuse old data or use new values. At this time, dataTable reuse old values. May be someone can correct me if otherwise.

Though it is a good tool (no doubt :) ), I recommend Allan considering this for a possible solution.

Fine, let us go to solution.

I am also calling a function as below to send new parameter values to server


[code]

function TblServerParams(DataAo) {
DataAo.push({
"name": "TextBoxID", "value": $('#TextBoxID').val() });
return DataAo;
}
function LoadDataTable(){
if (oTable !== undefined) {
oTable.fnDraw(true); // this is where successive calls takes place and it also sends new parameter values to server
return;
}

//Here goes the code for first call to server
oTable = $('#dataTableVariableName ').dataTable({
bRetrieve: true,
bPaginate: true,
bServerSide: true,
fnServerParams: function (aoData) {
//TblServerParams function is called each time fnServerParams sends data to server
TblServerParams(aoData);
},
"sServerMethod": "POST",
"sAjaxSource": "//" //Call to asp.net mvc
});
}
[/code]

Note: posted code is a snippet of the solution.
DataTables version: 1.9.4