使用输入框展示数据时，如何实现jQuery Datatables过滤功能？

核心问题原因 #

DataTables默认读取的是表格单元格的文本内容，而输入框的实际值存储在value属性中，不在单元格的文本节点里，导致默认搜索逻辑无法识别输入框内的内容。同时你遇到的重复初始化报错，是因为没有判断表格是否已被DataTables实例化。

解决方案代码 #

HTML表格结构示例

<table id="studentTable">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里替换成你的PHP循环输出逻辑 -->
    <tr>
      <td><input type="text" name="studentId" value="S001" required></td>
      <td><input type="text" name="studentName" value="张三" required></td>
      <td><input type="text" name="studentScore" value="92" required></td>
    </tr>
    <tr>
      <td><input type="text" name="studentId" value="S002" required></td>
      <td><input type="text" name="studentName" value="李四" required></td>
      <td><input type="text" name="studentScore" value="85" required></td>
    </tr>
  </tbody>
</table>

JavaScript配置（解决搜索+避免重复初始化）

$(document).ready(function() {
  // 先判断表格是否已被DataTables初始化，防止重复初始化报错
  if (!$.fn.dataTable.isDataTable('#studentTable')) {
    var studentTable = $('#studentTable').DataTable({
      columnDefs: [
        {
          targets: '_all', // 对所有列生效，可指定列索引如[0,1,2]
          render: function(data, type, row, meta) {
            // 当DataTables执行搜索/排序时，返回输入框的value值
            if (type === 'filter' || type === 'sort') {
              return $(data).val();
            }
            // 页面显示时保留输入框的HTML结构
            return data;
          }
        }
      ]
    });

    // 监听输入框内容变化，实时更新DataTables的搜索缓存
    $('#studentTable tbody').on('keyup change', 'input', function() {
      var targetCell = $(this).closest('td');
      // 更新对应单元格的数据并重新绘制表格
      studentTable.cell(targetCell).data($(this).val()).draw();
    });
  }
});

关键逻辑说明 #

1. 避免重复初始化：用$.fn.dataTable.isDataTable()检测表格状态，仅在未初始化时执行实例化操作。
2. 自定义数据读取规则：通过columnDefs.render区分DataTables的操作类型，搜索/排序时读取输入框的value，显示时保留输入框结构。
3. 实时同步输入内容：监听输入框的keyup和change事件，实时将输入内容同步到DataTables的数据源中，确保搜索功能能响应最新内容。

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