在React中使用Bootstrap Datatable，如何获取搜索过滤后的数据集

首先修正你代码里的一个小问题：tbody中循环的tableData应该是状态dataFromAPI，否则数据无法正确渲染。

要实现获取搜索过滤后的记录数组，可以利用DataTable自身的API和事件机制，具体实现如下：

• 监听DataTable的search.dt事件，该事件会在用户操作搜索框（输入/删除内容）时触发
• 通过DataTable实例的rows({ search: 'applied' }).data()方法获取当前过滤后的行数据
• 将获取到的行数据转换为与原API数据结构一致的对象数组，存入React状态中

以下是修改后的完整代码：

import { useEffect, useRef, useState } from 'react';
import axios from 'axios';

function MyApp(){
  const tableRef = useRef(null);
  const [tableInstance, setTableInstance] = useState(null); // 重命名变量更清晰
  const [dataFromAPI, setDataFromAPI] = useState([]);
  const [filteredData, setFilteredData] = useState([]); // 存储过滤后的结果

  useEffect(()=> {
    axios.get("url").then(response=>setDataFromAPI(response.data))
  },[])
 
  useEffect(() => {
    // 销毁旧的DataTable实例，避免重复初始化
    if (tableInstance) {
      tableInstance.destroy();
    }

    // 初始化DataTable
    const dtInstance = $(tableRef.current).DataTable({
      bSort: false,
      scrollY: "200px",
      scrollCollapse: true,
      info: true,
      paging: false
    });
    setTableInstance(dtInstance);

    // 定义搜索事件处理函数
    const handleSearch = () => {
      // 获取应用了搜索过滤的所有行数据
      const filteredRows = dtInstance.rows({ search: 'applied' }).data().toArray();
      // 将DataTable返回的列值数组转换为原数据结构的对象数组
      const transformedData = filteredRows.map(row => ({
        A: row[0],
        B: row[1],
        C: row[2]
      }));
      setFilteredData(transformedData);
    };

    // 绑定搜索事件
    $(tableRef.current).on('search.dt', handleSearch);

    // 组件卸载时清理事件和实例
    return () => {
      $(tableRef.current).off('search.dt', handleSearch);
      dtInstance.destroy();
    };
  }, [dataFromAPI, tableInstance]);

  return (
    <>
     <table className="table" ref={tableRef}>
       <thead>
         <tr>
           <th>A</th>
           <th>B</th>
           <th>C</th>
         </tr>
       </thead>
       <tbody>
         {dataFromAPI.map((_value, i) => {
           return (
             <tr key={i}>
               <td>{_value['A']}</td>
               <td>{_value['B']}</td>
               <td>{_value['C']}</td>
             </tr>
           );
         })}
       </tbody>
     </table>
     {/* 可取消注释查看过滤结果，用于调试 */}
     {/* <pre>{JSON.stringify(filteredData, null, 2)}</pre> */}
    </>
  )
}

关键说明： #

1. 事件监听：search.dt是DataTable专门用于搜索操作的事件，每次搜索框内容变化都会触发，确保实时获取过滤结果。
2. 获取过滤数据：rows({ search: 'applied' })表示只选择应用了搜索过滤的行，.data()返回这些行的原始数据（按列顺序的数组），.toArray()将DataTable的结果集转换为普通数组。
3. 数据转换：DataTable存储的行数据是列值的数组（对应表格的A、B、C列），需要映射回原数据的对象结构，方便后续业务使用。
4. 清理逻辑：在useEffect的返回函数中移除事件监听并销毁DataTable实例，避免React组件卸载时出现内存泄漏。

这样修改后，既能保留DataTable原有的所有功能，又能实时获取用户搜索过滤后的记录数组，存储在filteredData状态中供你后续使用。

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