如何在jQuery中获取表单内Datatable的全部数据？

Datatable启用分页后，非当前页的表格行会被移除出DOM，直接通过表单对象获取元素只能拿到当前页的输入值。以下是两种无需依赖Datatable.row().data()的解决方案：

方案一：维护全局数据源同步输入框变化 #

通过全局数组实时同步所有输入框的内容，提交时直接使用该数组：

// 全局数组存储所有表格行的输入数据
let allTableData = [];

// 绑定输入框变化事件，同步数据到全局数组
function bindInputSync() {
  $('#ctable tbody input').off('input').on('input', function() {
    const $row = $(this).closest('tr');
    const table = $('#ctable').DataTable();
    // 获取当前行在Datatable中的索引
    const rowIdx = table.row($row).index();
    // 提取当前行的输入值
    allTableData[rowIdx] = {
      customer: $row.find('td:eq(0) input').val(),
      cname: $row.find('td:eq(1) input').val(),
      contact: $row.find('td:eq(2) input').val()
    };
  });
}

// 提交按钮点击事件
$('#submitthis').click(function() {
  // allTableData即为所有页的输入数据
  console.log(allTableData);
  // 此处可添加数据提交逻辑
});

// 初始化Datatable及事件绑定
$(document).ready(function() {
  $('#ctable').DataTable({
    pageLength: 5 // 示例分页配置
  });
  bindInputSync();
  
  // 若动态添加行，需在添加后重新绑定事件
  // 例如添加行的函数：
  // function addRow() {
  //   const newRow = '<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><button>删除</button></td></tr>';
  //   $('#ctable tbody').append(newRow);
  //   $('#ctable').DataTable().draw(false);
  //   bindInputSync();
  // }
});

方案二：利用Datatable API获取所有行节点 #

通过Datatable的rows().nodes()方法获取所有行的DOM节点（包括非当前页缓存的节点），遍历提取输入值：

$('#submitthis').click(function() {
  const table = $('#ctable').DataTable();
  const allData = [];
  
  // 遍历所有行的DOM节点
  table.rows().nodes().each(function(rowNode) {
    const $row = $(rowNode);
    allData.push({
      customer: $row.find('td:eq(0) input').val(),
      cname: $row.find('td:eq(1) input').val(),
      contact: $row.find('td:eq(2) input').val()
    });
  });
  
  console.log(allData);
  // 处理数据提交
});

原代码问题说明 #

你之前使用document.forms["frm1"]获取表单元素，只能拿到当前DOM中存在的元素，而Datatable分页时会将非当前页的行从DOM中移除，因此无法获取全部数据。上述两种方案均绕过了DOM限制，直接从Datatable的缓存或全局同步数据中获取完整输入值。

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