Submit form data to server and then populate data table based on server response.

vedurocks

Hello
I am stuck at a problem.
I want to submit a form which contains 10 input fields, to the server and then according to the input want to populate the datatable from server side response through ajax.

I tried using aodata.push in fnserverparam but its tedious as this require me to send each form field value using key value pairs.
Is there a direct solution by which i can serialize the complete form and send the data in one go.

Any help here would be greatly appreciated.

girishmr

This is the working code and this is how I have implemented it.
Hope this helps. Yes here as well its name value pair. Probably you can serialize ! just a thought

[code]
oTable = $("#Remittance").dataTable( {
"sDom": "<'row'<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6 'p>>",
"sPaginationType": "bootstrap",
"bSort": false,
"bInfo": true,
"bProcessing": false,
"bAutoWidth": true,
"bServerSide": true,
"bRetrieve": true,
"bDeferRender": true,
// Make the first 'id' column invisible for the end user
"aoColumns": [
{ "bVisible": false },
null,null, null, null, null, null, null,
// Script location
"sAjaxSource": "../includes/getRemittance.php",
"sServerMethod": "POST",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
aoData.push( { "name": "remitStatus", "value": remitStatus } );
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (data) {
$('#Remittance').removeClass('hide invisible');
$('#processing').removeClass('alert alert-info').addClass('hide invisible');
fnCallback(data);
},
statusCode: {
200: function(data) {
if (data['iTotalDisplayRecords'] == 0 ) {
$('#processing').removeClass('alert alert-info').addClass('hide invisible');
}
}
}
} );
}
});
[/code]