Datatables - Server side processing - Submit form data - fnServerData not getting called

ureshkuruhuri

Hello,

I am trying to implement the datatables with server-side processing.

This is what I am trying to achieve:

On a form, I have some search input fields which on submission would retrieve numerous results. In order to achieve optimum performance we are trying to implement datatables with server-side processing.

I went through the documentation for the server-side and as a part of PoC (without the form fields being submitted - CodeSet 1 below) I see that the sAjaxSource is called at the time of datatables initialization, and the datatable is getting rendered. However, we wanted to initialize the datatables with server-side processing on form submission ( scenario explained below after Code set 1)

---CodeSet 1---------- without fnServerData -------------
[code]
var violationDT;
function initDataTable(){
/*
* initiate the datatable for the violations table.
*/
violationDT = $("#tableViolations").dataTable({
"bServerSide": true,
"sAjaxSource": ajaxDataURL,
"bProcessing": true,
"bJQueryUI": true,
"iDisplayLength": 50,
"iDisplayStart": 0,
"aoColumns":
[
{"mDataProp":"field 1"},
{"mDataProp":"field 2"},
{"mDataProp":"field 3"},
{"mDataProp":"field 4"},
{"mDataProp":"field 5"},
{"mDataProp":"field 6"}
]
});
}
[/code]

Actual scenario:
On submitting the form input fields, we want to initialize the datatable with server-side processing. So, after searching through the posts on how to submit extra information (http://www.datatables.net/examples/server_side/custom_vars.html), I added the fnServerData as in the CodeSet 2 below, but the URL is never triggered on invoking the javascript method. It just initializes the datatable with the parameters and the fnServerData is never invoked.

1. Can somebody help out on how to trigger the fnServerData.

2. Also, is there a way to submit the form data (like in usual form submit) in this scenario instead of adding (pushing) multiple elements to the aoData parameter?

---CodeSet 2---------- with fnServerData -------------
[code]
var violationDT;
function initDataTable(){
/*
* initiate the datatable for the violations table.
*/
var location = $('#selectedLocation').val();
violationDT = $("#tableViolations").dataTable({
"bServerSide": true,
"sAjaxSource": ajaxDataURL,
"bProcessing": true,
"bJQueryUI": true,
"iDisplayLength": 50,
"iDisplayStart": 0,
"aoColumns":
[
{"mDataProp":"field 1"},
{"mDataProp":"field 2"},
{"mDataProp":"field 3"},
{"mDataProp":"field 4"},
{"mDataProp":"field 5"},
{"mDataProp":"field 6"}
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "location", "value": location } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
} );
}
});
}
[/code]

Thanks,
Uresh

ureshkuruhuri

I also tried the following, but to no work.

[code]

var violationDT;
function initDataTable(){
/*
* initiate the datatable for the violations table.
*/
var location = $('#selectedLocation').val();
violationDT = $("#tableViolations").dataTable({
"bServerSide": true,
"sAjaxSource": violationsAjaxURL,
"bProcessing": true,
"bJQueryUI": true,
"iDisplayLength": 50,
"iDisplayStart": 0,
"aoColumns":
[
{"mDataProp":"field 1"},
{"mDataProp":"field 2"},
{"mDataProp":"field 3"},
{"mDataProp":"field 4"},
{"mDataProp":"field 5"},
{"mDataProp":"field 6"}
],
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
});
violationDT.fnReloadAjax();
}
[/code]

This time, when I tried the below, having the fnReloadAjax called, it is giving

[quote]TypeError: oSettings is null[/quote] at

[code]
if ( oSettings.oFeatures.bServerSide ) {
[/code]