jQuery DataTables表单提交时数据为空，求排查问题原因

你遇到的提交时data变量为空的核心原因是DataTables渲染的表单元素缺少name属性——jQuery的serialize()方法完全依赖元素的name来收集数据，没有name的输入框根本不会被序列化。另外，还有几个细节需要调整，让服务器能正确识别每行的数据。

1. 给所有表单元素添加name属性 #

修改DataTables列的mRender函数，给复选框、文本框和每行的ID（隐藏字段）都加上name，并且用数组格式命名，方便服务器端用列表模型接收：

修改ID列（隐藏列）的渲染 #

把第一列（ID）改成隐藏输入框，带上唯一标识的name：

{ 
  "sWidth": "1%", 
  sClass: "smallFonts",
  "mRender": function(data, type, row) {
    // 用row[0]作为唯一索引，确保每行的name不重复
    return `<input type="hidden" name="ProjectStatuses[${row[0]}].ID" value="${row[0]}">`;
  }
}

修改复选框列的渲染 #

给复选框添加name，绑定到模型的IsIncluded属性：

{ 
  "sWidth": "10%", 
  sClass: "smallFonts", 
  "sName": "Include",
  "mRender": function (data, type, row) {
    var isChecked = row[2] === 'True' ? 'checked' : '';
    return `<div class='tooltip'>
              <span class='tooltiptext1' style='font-size:x-small !important;'>Check to include this status with this type.</span>
              <input type='checkbox' ${isChecked} name="ProjectStatuses[${row[0]}].IsIncluded" id='chknotify${row[0]}'>
            </div>`;
  }
}

修改文本框列的渲染 #

给文本框添加name，绑定到模型的Number属性：

{ 
  "sWidth": "10%", 
  sClass: "smallFonts", 
  "sName": "Number",
  "mRender": function (data, type, row) {
    return `<input type='text' style='width:70px' name="ProjectStatuses[${row[0]}].Number" value="${row[3]}">`;
  }
}

2. 简化提交逻辑，确保序列化正确 #

原来的提交代码里，把data包在{ model: data }里会导致服务器端解析困难，直接传递序列化后的表单数据即可：

$('#formStatusByType').on('submit', function (e) {
  e.preventDefault();
  var table = $('#tblChooseProjectStatus').DataTable();
  // 序列化所有带name的表单元素
  var formData = table.$('input').serialize();
  
  $.ajax({
    url: '@Url.Action("PostTable")',
    type: 'POST',
    data: formData,
    success: function (response) {
      console.log('Server response:', response);
    },
    error: function(xhr, status, error) {
      console.error('Submission error:', error);
    }
  });
});

3. 服务器端对应模型调整 #

创建一个ViewModel类来接收提交的数据：

public class ProjectStatusViewModel
{
    public int ID { get; set; }
    public bool IsIncluded { get; set; }
    public int Number { get; set; } // 若允许空值，可改为int?
}

然后控制器方法接收列表：

[HttpPost]
public ActionResult PostTable(List<ProjectStatusViewModel> ProjectStatuses)
{
    // 这里处理你的业务逻辑，比如更新数据库
    return Json(new { Success = true, Message = "Data updated successfully" });
}

额外优化建议 #

• 移除你代码里的$('#tblChooseProjectStatus tbody').on('click', 'td', ...)事件，因为它的逻辑有点混乱（点击td去切换复选框状态，但代码里的判断和操作不对），直接让复选框自己处理点击即可。
• 保持DataTables的列隐藏逻辑不变：$("#tblChooseProjectStatus").dataTable().fnSetColumnVis(0, false);，ID列作为隐藏输入框已经能传递数据了。

内容的提问来源于stack exchange，提问作者Dean.DePue