带分页DataTable输入字段提交问题：仅当前页数据提交求解决方案

这个问题我之前做项目的时候也踩过坑！DataTable分页的机制是只把当前页的行渲染到DOM里，其他页的行都会被临时移除，所以表单提交的时候自然只会带上当前页的输入值。给你三个实用的解决办法，按需选就行：

方案一：提交前用DataTable API收集所有行的输入值（推荐） #

这是最通用的方案，不管表格数据量多大都能用。核心思路是：点击提交按钮时，先通过DataTable的API遍历所有分页的行，把每个输入框的值收集起来，再把这些数据传递给后端（可以用隐藏字段或者直接AJAX提交）。

示例代码：

<form id="projectForm" method="POST">
  <div class="table-responsive">
    <table id="dataTablesFullDesc" class="table table-striped table-hover">
      <thead>
        <tr>
          <th><?php _e('ID'); ?></th>
          <th><?php _e('Project Name'); ?></th>
          <!-- 假设第三列是输入字段 -->
          <th><?php _e('Input Field'); ?></th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格数据行，比如每行第三列是<input type="text" class="project-input"> -->
      </tbody>
    </table>
  </div>
  <!-- 隐藏字段存储所有输入值的JSON字符串 -->
  <input type="hidden" id="allInputData" name="all_input_data">
  <button type="button" id="submitFormBtn">提交</button>
</form>

<script>
$(document).ready(function() {
  // 初始化DataTable
  const table = $('#dataTablesFullDesc').DataTable();

  // 绑定提交按钮点击事件
  $('#submitFormBtn').click(function() {
    const inputData = [];
    
    // 遍历所有行（包括所有分页）
    table.rows().every(function() {
      const rowNode = this.node();
      // 获取当前行的ID和输入框值
      const projectId = $(rowNode).find('td:first').text();
      const inputValue = $(rowNode).find('.project-input').val();
      
      inputData.push({
        id: projectId,
        value: inputValue
      });
    });

    // 把数组转成JSON字符串存入隐藏字段
    $('#allInputData').val(JSON.stringify(inputData));
    // 提交表单
    $('#projectForm').submit();
  });
});
</script>

后端拿到all_input_data参数后，解析JSON就能得到所有行的输入值了，比如PHP里可以用json_decode($_POST['all_input_data'], true)来处理。

方案二：强制保留所有DOM元素（仅适合小数据量表格） #

如果你的表格数据很少（比如几十条），可以让DataTable不移除非当前页的行，这样所有输入框都在DOM里，表单提交时就能自动带上所有值。只需要在初始化时添加两个配置：

$('#dataTablesFullDesc').DataTable({
  deferRender: false, // 关闭延迟渲染，一次性渲染所有行
  destroy: false,     // 不销毁原有DOM元素
  // 你的其他配置项（分页、排序等）
});

⚠️ 注意：这个方法不适合大数据量表格，会导致页面加载慢、卡顿，影响用户体验。

方案三：用AJAX异步提交数据 #

直接放弃传统的表单提交，用AJAX把收集到的所有数据发给后端，这种方式更灵活，还能做加载提示、错误处理等交互：

$('#submitFormBtn').click(function() {
  const inputData = [];
  table.rows().every(function() {
    const projectId = $(this.node()).find('td:first').text();
    const inputValue = $(this.node()).find('.project-input').val();
    inputData.push({id: projectId, value: inputValue});
  });

  // AJAX提交
  $.ajax({
    url: '/your-backend-api.php', // 替换成你的后端接口地址
    type: 'POST',
    data: {project_inputs: inputData},
    dataType: 'json',
    beforeSend: function() {
      // 可以显示加载动画
      $('#submitFormBtn').text('提交中...').prop('disabled', true);
    },
    success: function(response) {
      alert('提交成功！');
      // 重置按钮状态
      $('#submitFormBtn').text('提交').prop('disabled', false);
    },
    error: function() {
      alert('提交失败，请重试');
      $('#submitFormBtn').text('提交').prop('disabled', false);
    }
  });
});

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