Vijay V. Vijay V. - 3 months ago 64
Javascript Question

How to send form data along with jQuery DataTables data in server-side processing mode

I am trying to post form data without success and data couldn't be loaded.

How can I pass all form data with array and single textbox, combobox, etc. to

fnServerdata
?

table_obj = $('#group-table').dataTable({
"sAjaxSource": "URL Goes here",
fnServerData: function(sSource, aoData, fnCallback,oSettings) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource+'?'+$.param(aoData),
"data": $("#frm").serializeArray(),
"success": fnCallback
} );
},
aaSorting: [[ 1, "desc" ]],
bProcessing: true,
bServerSide: true,
processing : true,
columnDefs: [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<label><input type="checkbox" name="user_id[]" value="' + $('<div/>').text(data).html() + '"></label>';
}
}],
rowCallback: function(row, data, dataIndex){
// If row ID is in list of selected row IDs
if($.inArray(data[0], rows_selected) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
},
iDisplayLength: '50',
});

Answer

SOLUTION 1

Replace this:

$('#group-table').dataTable({
   "sAjaxSource": "URL Goes here",
   fnServerData: function(sSource, aoData, fnCallback,oSettings) {
      oSettings.jqXHR = $.ajax( {
         "dataType": 'json',
         "type": "POST",
         "url": sSource+'?'+$.param(aoData),
         "data": $("#frm").serializeArray(),
         "success": fnCallback
      } );
   },

with:

$('#group-table').dataTable({
   "ajax": {
      "url": "URL Goes here",
      "type": "POST",
      "data": function(d){
         d.form = $("#frm").serializeArray();
      }
   },

Your form data will be in form parameter as an array of objects with parameters name and value, below is JSON representation:

"form": [{"name":"param1","value":"val1"},{"name":"param2","value":"val2"}]

SOLUTION 2

If you want to have form data as name/value pairs, see this jsFiddle for an example of alternative solution.


NOTES

There are checkboxes in your data table. Solution above will not work for form elements in the data table, because DataTable removes non-visible nodes from DOM.

Comments