Why does fnAddData do a request to server side when you call it

jchannon

I have the following:
[code]
$(document).ready(function () {

oTable = $('#example').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetData",
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bFilter": true,
"bAutoWidth": false
});

});
[/code]
On a click of a button I do this:
[code]
$.ajax({
type: "GET",
url: "Home/GetSearchData",
data: $.toJSON(DataTablesModel),
dataType: "json",
success: function (data, status) {
//alert("SUCCESS: " + status + "\n\n" + data);
oTable.fnAddData(data.aaData);
},
complete: function (data, status) {
//alert("COMPLETE : " + data + status);
}
});
[/code]
The AJAX request returns all my data, calls fnAddData but then another request is made to the server which overrides my original data. How can I prevent this request?

allan

The issue here is that you are effectively mixed two different data stores - the client-side model with fnAddData, and the server-side model with bServerSide:true. In server-side processing DataTables is really just an event handler and display container - it doesn't store the data for anything other than display (i.e. all sorting etc is done on the server). However, fnAddData doesn't know anything about your server-side environment so can't add your new row to the database - as such fnAddData is suitable only for client-side processing.

So what is needed is to add your data to your server-side processing database with your Ajax call and then do an fnDraw on the table to reload the data from the server.

Allan

jchannon

So essentially do what I'm doing but instead of calling fnAddData call fnDraw?

Also how can I pass the DataTables settings into my AJAX call? I tried passing an object in my JSON data:
[code]
var oSettings = oTable.fnSettings();
var DataTablesModel = new Object();
DataTablesModel.myInfo = "";
DataTablesModel.Settings = oSettings;
[/code]

However when I call $.toJSON it errors saying the recursion is too deep.

I then tried indvidually reading properties out of oSettings and assigning them as properties in my object but things like sEcho weren't available.

allan

> So essentially do what I'm doing but instead of calling fnAddData call fnDraw?

Possibly - it depends on exactly what you want. I'n not sure why you want to pass the DataTables settings object with your Ajax parameters for example? I'm presuming you just want to add a row - so make your Ajax call to the server to add the row to the DB, and then call oTable.fnDraw() and it will redraw with the latest data from the server.

Allan

jchannon

The scenario I have is a user goes to a page. It does an initial SQL statement. On the page they have a textbox to enter a value. On the AJAX call I send this value so it then executes a slightly modified SQL Script with this value in the where clause.

When that data gets returned I want the table to redraw with the new data.

I can't seem to get fnDraw to do what I want as it makes anothe request to the server after my AJAX call has returned.

jchannon

Ok this is what I have now:

[code]
var oTable;

$(document).ready(function () {

oTable = $('#example').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetData",
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bFilter": true,
"bAutoWidth": false,
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */
aoData.push({ "filtervalue": $('#filtervalue').val(), "Options": $('#Options').val() });
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
});
}
});

});

$('#btn').live("click", function () {
oTable.fnDraw();
[/code]

However in the QueryString, the data I added comes in as undefined:undefined. But if I do this it works:

[code]
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */

$.getJSON(sSource, aoData.concat($('form').serializeArray()), function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
});
}
[/code]

How can I get the aoData push to work?

allan

Does $('form').serializeArray() give the key / value pair that is needed for the JSON request? THe basic principle is just:

[code]
aoData.push( { "name": "more_data", "value": "my_value" } );
[/code]
So it might be worth adding a console.dir to the serializeArray() return to see what it actually is.

Allan

jchannon

Doing [code]$('form').serializeArray()[/code] does produce the correct JSON. But the push produces undefined:undefined

allan

I'm at a little bit of a loss in that case - I'd suggest adding a console.dir of aoData and check that it is something sensible. Also adding in that for the serializeArray and for the concat result.

Allan