[fnServerParams] undefined=undefined sent

ysor123

Hallo

i have a Problem using the fnServerParams method. No matter what i push to the aoData, it always send a single undefined=undefined param.
I tested it then just passing literal constant values (more code follows):
[code]
fnServerParams : function(aoData)
{
aoData.push({test1:'wert1',test2:'wert2'});
}
[/code]

I think its important to have a full overview of the situation, so here it comes:

[code]
/* SELECTABLE TABLE */

(function($){

var methods = {
init : function(settings)
{
var $this = $(this);

settings.fnBeforeInit.apply(this, []);

$this.find('tbody > tr').click(function(e){
var $this = $(this);
var selected = $this.hasClass('selected');

if(selected) {
settings.fnBeforeDeselect.apply(this, []);
} else {
settings.fnBeforeSelect.apply(this, []);
}

$this.toggleClass('selected');
if(!settings.bSelectMultiple) {
$this.parent().find('tr').not(this).removeClass('selected');
}

if(selected) {
settings.fnAfterDeselect.apply(this, []);
} else {
settings.fnAfterSelect.apply(this, []);
}

e.preventDefault();
});

settings.fnAfterInit.apply(this, []);
}
};

$.fn.tblSelectable = function(method, options)
{
var settings = {
bSelectMultiple : false,
fnBeforeSelect : function(){},
fnAfterSelect : function(){},
fnBeforeDeselect : function(){},
fnAfterDeselect : function(){},
fnBeforeInit : function(){},
fnAfterInit : function(){}
};
return this.each(function(){
switch(method)
{
case 'init' :
default :
if(options) {
$.extend(settings, options);
}
methods['init'].apply(this, [settings]);
break;
}
});
}
})(jQuery);



/* DT HELPER */


(function($){
var settings = {
sDom : '<"H"r>t<"F"ilp>',
iDisplayLength : 25,
sPaginationType : 'full_numbers',
bJQueryUI: true,
bServerSide: true,
oLanguage : {
"sProcessing": "Bitte warten…",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge gefunden.",
"sInfo": "Einträge _START_ bis _END_ von _TOTAL_",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suchen",
"sUrl": "",
"oPaginate": {
"sFirst": "erste",
"sPrevious": "zurück",
"sNext": "weiter",
"sLast": "letzte"
}
}
};
initDatatable = function(selector, user_settings)
{
$.extend(settings, user_settings);
if(settings.title) {
settings.fnInitComplete = function(nHeader) {
$(this).parent().find('div:first').html('' + user_settings.title + '');
}
}
// var $tbl = $(selector).addClass('display').dataTable(settings);
if(settings.selectable) {
settings.fnDrawCallback = function()
{
$(this).dataTable({bRetrieve: true})
.tblSelectable('init', settings.selectable)
.addClass('selectable');
}
}
return $(selector).addClass('display').dataTable(settings)
// return $tbl;
}
})(jQuery);
[/code]

I just created a initDatatable function, which does everything i need on different pages, so i dont have to write it everytime.
I also want to make some tables rows selectable. This is provided by the tblSelectable method i extend to jquery.
So the following datatables initialization use the initDatatable function:

[code]
var $tbl_filter = $('#dt_va_filter');
var $tbl = initDatatable('#dt_va', {
title : 'Veranstaltungen',
sAjaxSource : '<?=$this->helper()->clink('veranstaltungen', 'xhr', 'act=va_list')?>',
fnServerParams : function(aoData)
{
//aoData.push($tbl_filter.serialize());
aoData.push({test1:'wert1',test2:'wert2'});
},
aoColumns : [
{mDataProp: 'id', sWidth : 35},
{mDataProp: 'bezeichnung'},
{mDataProp: 'veranstaltungsort'},
{mDataProp: 'intern_datum_von', sWidth : 130},
{mDataProp: 'intern_datum_bis', sWidth : 130},
{mDataProp: 'extern_datum_von', sWidth : 130},
{mDataProp: 'extern_datum_bis', sWidth : 130}
],
selectable : {
// dataTables redraw rows on ajax request, selected rows are lost, so the options
// should be all disabled
fnBeforeInit : function()
{
$('#content-opts').contentOpts(
'disable', ['event-edit','event-del','event-open','event-info']
);
},
// fnBeforeSelect : function() {
// },
fnAfterSelect : function() {
$('#content-opts').contentOpts(
'enable', ['event-edit','event-del','event-open','event-info']
);
},
// fnBeforeDeselect : function() {
// },
fnAfterDeselect : function() {
$('#content-opts').contentOpts(
'disable', ['event-edit','event-del','event-open','event-info']
);
}
}
});
[/code]

ContentOpts is another jquery mini extension i wrote, but i think its not important here. It just allows me to add, enable or disable options for the selected rows and add click-callbacks.

What i want is to add my own filter bar (form) and add it to the sent data using the serialize-method. Then i would process them server side.
But for some reason i only get addition param undefined=undefined sent to the server.


*edit*

I forgot something important... I use dataTables 1.8.2 and jQuery 1.6.3
I know that dataTables fnServerParams was included in 1.8.2 (searched for fnServerParams")

*edit1*

using:

[code]
fnServerData: function (sSource, aoData, fnCallback) {
aoData.push({param1: 'value1'});
$.ajax({
dataType: 'json',
url: sSource,
data: aoData,
success: fnCallback
});
}
[/code]

Also leads to an undefined=undefined param...

ysor123

*head => table*
Solution found by checking aoData using
[code]
for(var k in aoData) {

}
[/code]

The "name"-prop and "value"-prop isnt just example...
So it should be :
[code]
aoData.push({name : 'param1', value : 'value1'});
[/code]

for the above example ...
So the form serialization as solution is canceled. i have to read every input value and then push it to aoData.

ysor123

if someone have a filter bar containing form elements and want them to be sent to the server each time an AjaxRequest is sent by DT, you can use the following function:

[code]
pushFormData = function(sFormSelector, aoData)
{
var filter = $(sFormSelector).serializeArray();
for(var index in filter) {
aoData.push({name : filter[index]['name'], value : filter[index]['value']});
}
}
[/code]

on initing your DT use fnServerParams:

[code]
$('selector').dataTable({
fnServerParams : function(aoData)
{
pushFormData('#my_filter_bar', aoData);
}
});
[/code]

Its useful if you combine multiple filters, like string search, column value filter and they should be always sent to the server together. This function save your time picking the input values one by one.