如何为simple-datatables添加单列搜索输入框？

实现步骤及代码修改 #

你需要在表格初始化后，为每一列创建搜索输入框，并绑定对应的列搜索事件。以下是修改后的完整代码：

const datatables = select('.datatable', true);
datatables.forEach(datatable => {
  // 初始化表格并保存实例
  const dtInstance = new simpleDatatables.DataTable(datatable, {
    perPageSelect: [10, 25, 50, 100, ["All", -1]],
    columns: [{
        select: 2,
        sortSequence: ["desc", "asc"]
      },
      {
        select: 3,
        sortSequence: ["desc"]
      },
      {
        select: 4,
        cellClass: "green",
        headerClass: "red"
      }
    ]
  });

  // 获取列总数
  const columnCount = dtInstance.columns().length;

  // 创建搜索输入框所在的页脚行
  const searchRow = document.createElement('tr');

  // 为每一列生成搜索输入框
  for (let i = 0; i < columnCount; i++) {
    const cell = document.createElement('td');
    const input = document.createElement('input');
    
    input.type = 'text';
    input.placeholder = `搜索第${i+1}列`;
    input.style.width = '100%';
    input.style.padding = '4px 8px';
    input.style.boxSizing = 'border-box';

    // 绑定搜索事件：输入变化时触发对应列的搜索
    input.addEventListener('input', () => {
      dtInstance.search(input.value, { column: i });
    });

    cell.appendChild(input);
    searchRow.appendChild(cell);
  }

  // 将搜索行添加到表格页脚（若没有页脚则先创建）
  let tableFooter = datatable.querySelector('tfoot');
  if (!tableFooter) {
    tableFooter = document.createElement('tfoot');
    datatable.appendChild(tableFooter);
  }
  tableFooter.appendChild(searchRow);
});

关键说明 #

1. 保存表格实例：初始化时将 simpleDatatables.DataTable 的实例保存到变量中，方便后续调用搜索API。
2. 动态生成输入框：根据列数量创建对应数量的文本输入框，插入到表格的页脚行中。
3. 列专属搜索：利用 simple-datatables 提供的 search() 方法，通过 { column: i } 参数指定仅对当前列进行搜索，无需手动处理过滤逻辑。
4. 样式优化：给输入框添加基础样式，确保其适配表格单元格宽度。

可选调整 #

• 将输入框放在表头：若不想用页脚，可将搜索行插入到表头（thead）中，只需修改获取表格容器的代码为 datatable.querySelector('thead') 即可。
• 跳过隐藏列：如果表格有隐藏列，可在生成输入框前判断列是否可见：

  if (dtInstance.columns(i).visible()) {
    // 生成输入框的代码
  }
  

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