Submit form data to server and then populate data table based on server response.
Submit form data to server and then populate data table based on server response.
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.
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.
This discussion has been closed.
Replies
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]