如何在服务器端处理模式下发送表单数据以及jQuery DataTables数据 [英] How to send form data along with jQuery DataTables data in server-side processing mode

问题描述

我如何通过数组和单个文本框，组合框传递所有的表单数据，等到 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），
数据：$（＃frm）。serializeArray（），
success：fnCallback 
}）; 
}，
 aaSorting：[[1，desc ]]，
 bProcessing：true，
 bServerSide：true，
 processing：true，
 columnDefs：[{
'targets'：0，
'可搜索'：false，
'orderable'：false，
'className'：'dt-body-center'，
'render'：function（data， type，full，meta）{
 return'< label>< input type =checkboxname =user_id []value ='+ $（'< div />'） （data）.html（）+'>< / label>'; 
} 
}]，
 rowCallback：function（row，data，dataIndex）{
 //如果行ID在所选行ID的列表中
 if（$ .inArray（data [0]，rows_selected）！== -1）{
 $（row）.find（'input [type =checkbox]'）。prop（'checked'，true）; 
 $（row）.addClass（'selected'）; 
} 
}，
 iDisplayLength：'50'，
}）; 
  

解决方案

解决方案1 ​​ p>

替换为：

  $（'＃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（）; 
} 
}，
  

您的表单数据将以形式参数作为参数名称的对象数组和值，以下是JSON表示形式：

---

解决方案2

如果要将表单数据作为名称/值对，请参见此jsFiddle 作为替代解决方案的一个例子。

---

注意

数据表中有复选框。因为DataTable从DOM中删除不可见的节点，所以上面的解决方案对于表单元素将不起作用。

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

解决方案

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.

这篇关于如何在服务器端处理模式下发送表单数据以及jQuery DataTables数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！