如何在jQuery DataTables插件中使用搜索栏且不删除表格行？

解决方案 #

方案1：调整DataTables运行模式（优先推荐） #

jQuery DataTables 默认的客户端处理模式（serverSide: false，未开启服务端分页的默认配置）下，搜索功能本身就只会给不匹配的行添加display: none样式隐藏，不会从DOM中移除节点，表单提交时所有行的输入框内容都会被正常采集。
如果你当前开启了服务端处理模式（serverSide: true），只需要在初始化配置中关闭该配置即可：

$('#yourTable').DataTable({
  // 其他原有配置保持不变
  serverSide: false,
  // 分页、排序等原有功能均可正常保留，客户端模式下不会删除DOM节点
  paging: true
});

方案2：必须使用服务端模式的兼容方案 #

如果数据量过大必须开启服务端处理模式，可以通过以下两种方式解决提交时丢失未加载行数据的问题：

• 实时监听输入框变更，把值存入全局变量，提交时直接使用全局变量数据，不依赖表格DOM采集：

// 初始化全局存储变量，用行唯一ID/索引作为键保证对应关系
const invoiceValueMap = {};
// 监听输入框变更事件
$('#yourTable').on('change', 'input[name="invoice_no[]"]', function() {
  const rowId = $(this).closest('tr').attr('data-row-id');
  invoiceValueMap[rowId] = $(this).val();
});
// 表单提交时直接把invoiceValueMap转为对应格式提交即可

• 使用DataTables内置data()方法获取全量行数据，不需要读取DOM节点：

// 提交时获取所有行的内置存储数据，包含隐藏/未渲染的行
const allTableData = $('#yourTable').DataTable().data().toArray();
// 从allTableData中提取对应输入值拼接提交参数即可

补充排查要点 #

如果确认未开启服务端模式，还是提交时取不到隐藏行的输入值，大概率是你的表单采集逻辑只遍历了可见行，修改采集逻辑即可：

// 错误写法：仅遍历可见行
const submitValues = $('#yourTable tr:visible input[name="invoice_no[]"]').serializeArray();
// 正确写法：遍历所有行
const submitValues = $('#yourTable tr input[name="invoice_no[]"]').serializeArray();

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