javascript 如何在服务器端处理模式下将表单数据与 jQuery DataTables 数据一起发送

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31487738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:53:18  来源:igfitidea点击:

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

javascriptjquerydatatables

提问by Vijay V.

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?

如何将带有数组和单个文本框、组合框等的所有表单数据传递给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',
});

采纳答案by Gyrocode.com

SOLUTION 1

解决方案 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 formparameter as an array of objects with parameters nameand value, below is JSON representation:

您的表单数据将在form参数中作为带有参数name和的对象数组value,以下是 JSON 表示:

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


SOLUTION 2

解决方案2

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

如果您希望将表单数据作为名称/值对,请参阅此 jsFiddle以获取替代解决方案的示例。



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.

您的数据表中有复选框。上述解决方案不适用于数据表中的表单元素,因为 DataTable 从 DOM 中删除了不可见的节点。

回答by Val Cajes Luminarias

If you want to format the POSTdata, 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.

如果要格式化POST数据,也可以使用jquery .each()函数格式化表单数据。让我使用解决方案 #1 使用上面的答案,但jquery .each()用于格式化数据。

$('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:

然后你可以在 PHP 中访问它,如:

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

回答by curiosity

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 PHPusing this.

然后您可以使用它通过PHP访问上面的示例数据。

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

Hope that helps.

希望有帮助。