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

Question

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',
});

did you do web-searches for how to get form data in php and how to send sql requests? if you get errors, you should show them. — hoijui
– hoijui, Commented Jul 18, 2015 at 4:41
yes. i did it and getting response proper but i am trying with datatable ajax then getting issue — Vijay V.
– Vijay V., Commented Jul 18, 2015 at 4:50
if you get errors, you should show them. what do you mean with "getting issue"? — hoijui
– hoijui, Commented Jul 18, 2015 at 4:54
Issue is that... i didn't get form data with data table json data ? both data need to combine.. — Vijay V.
– Vijay V., Commented Jul 18, 2015 at 5:04

giraff · Accepted Answer · 2016-11-11 20:07:48Z

18

If you want to format the POST data, you can also format the form data using jquery .each() function. Let me use the answer above using solution #1 but with jquery .each() to format the data.

$('table').DataTable({
  "ajax": {
     "url": "URL HERE",
     "type": "POST",
     "data": function(d) {
       var frm_data = $('form').serializeArray();
       $.each(frm_data, function(key, val) {
         d[val.name] = val.value;
       });
     }
  }
});

Then you can just access that in PHP like:

var $data = $_POST['name'];

edited Nov 11, 2016 at 20:07

giraff

4,7092 gold badges25 silver badges37 bronze badges

answered Aug 12, 2016 at 0:29

Val Cajes Luminarias

2742 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zohaib Over a year ago

Thanks a lot. It works awesome and easy to understand. There was a typo. Just edited you answer.

Fred Mauroy Over a year ago

Excellent, except that doesn't work when you have multiple values for some form fields. I had to combine with this: jsfiddle.net/XW2Cm/1 and adapt your code like this: var frm_data = $('form').serializeObject(); $.extend(d, frm_data);

Gyrocode.com · Accepted Answer · 2015-07-18 11:36:01Z

3

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.

answered Jul 18, 2015 at 11:36

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

3 Comments

Vijay V. Over a year ago

will it combine data table parameter ?

Gyrocode.com Over a year ago

@VijayV., yes, with solution #1 using data option you create a new parameter form that will contain the form data. With solution #2 it combines with DatTables data but in a different way.

Triynko Over a year ago

Doesn't play well with MVC.

curiosity · Accepted Answer · 2019-09-05 07:14:22Z

0

How about this?

$('#group-table').DataTable( {
          "processing": true,
          "serverSide": true,
          "bDestroy": true,
          "bJQueryUI": true,
          "ajax": {
              "url": "url here",
              "type": "POST",
              "data": {
                   store: $('#store').val(),
                   month: $('#m').val(),
                   year: $('#y').val(),
                   status: $('#status').val(),
                },
          }
    } );

then you can access the sample data above through PHP using this.

$_POST['store']
$_POST['month']
$_POST['year']
$_POST['status]

Hope that helps.

answered Sep 5, 2019 at 7:14

curiosity

8448 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related