jQuery DataTable内嵌表单提交仅当前页输入项生效问题求解

jQuery DataTable 为了优化大表格渲染性能，默认仅将当前分页的表格行渲染到DOM树中，其他分页的行仅存储在DataTable内部的缓存中，没有实际挂载到页面文档流里。浏览器的表单序列化逻辑只会读取当前DOM中存在的输入项，因此非当前分页的勾选状态无法被识别，最终仅能提交当前页的输入数据。

最推荐的方案是通过DataTable官方API获取所有分页的输入内容，手动构造提交数据，不会破坏DataTable本身的性能优化特性，代码修改如下：

var table = $('#sampleTable').DataTable({
  "pageLength": 2
});

$('#submit-btn').on('click', function(e){
  e.preventDefault();
  // 获取所有分页的表格行DOM对象
  var allTableRows = table.rows().nodes().to$();
  // 序列化所有行内的表单输入项
  var submitData = allTableRows.find('input, select, textarea').serialize();
  // 若表单内有表格外的其他输入项，补充序列化
  // submitData += '&' + $('#form-other-fields').serialize();
  
  // 测试输出
  alert(submitData);
  // 提交数据可直接用ajax发送，或构造隐藏表单提交
  $.post('update.php', submitData, function(response) {
    // 处理提交结果
  });
});

• 若使用自定义样式的复选框组件，需确保组件的选中状态与原生input的checked属性保持同步，否则读取到的状态可能不准确
• 该方案兼容DataTable的搜索、筛选功能，rows().nodes()默认会返回所有符合筛选条件的行数据，如果需要提交全表所有数据（包括被筛选隐藏的行），可以改为table.rows({search: 'none'}).nodes()

内容的提问来源于stack exchange，提问作者Mahsa