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

回答1:

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.

回答2:

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'];

回答3:

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.

来源：https://stackoverflow.com/questions/31487738/how-to-send-form-data-along-with-jquery-datatables-data-in-server-side-processin

标签

javascript

jquery

datatables