Erhalten Sie gefilterte Daten in Bootstrap DataTable mithilfe von React.js, indem Sie Suchbegriffe eingeben

Question

Ich verwende Bootstrap-Datentabellen in meiner React-App

function MyApp(){

const tableRef = useRef(null);
const [tableSave, setTableSave] = useState(null)
const [dataFromAPI, setDataFromAPI] = useState([])

useEffect(()=> {
      axios.get("url").then(response=>setDataFromAPI(response.data))
},[])
 
useEffect(() => {
    
   setTableSave($(tableRef.current).DataTable(
      {
        bSort: false,
        scrollY: "200px",
        scrollCollapse: true,
        info: true,
        paging: false
      }
    ));
   
  }, [dataFromAPI]);
return (
<>
 <table className="table" ref={tableRef}>
            <thead>
              <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
              </tr>
            </thead>
            <tbody>
              {tableData.map((_value, i) => {
                return (
                  <tr key={i}>
                    <td key={i}>{_value['A']}</td>
                    <td key={i}>{_value['B']}</td>
                    <td key={i}>{_value['C']}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
</>
)
}

Jetzt werden die Daten korrekt angezeigt und die Suche funktioniert einwandfrei, aber ich möchte das Array, wenn der Benutzer die Suche eingibt und die Tabellendatensätze filtert. Ich weiß nicht, welche Methode ich in Bootstrap Datatable aufrufen soll, während ich an der React-App arbeite. Wenn der Benutzer beispielsweise „A“ in das Suchfeld eingibt, sollte die Methode aufgerufen werden und ein Array zurückgeben, das Objekte mit einem „A“-Wert in einer beliebigen Spalte enthält. Wie kann ich dies erreichen, indem ich die datierbare Funktionalität beibehalte?

Answer 1

刚刚得到答案

if(tableSave){
  tableSave.on("search.dt", function() {
      //filtered rows data as an arrays

      let data = tableSave.rows({ filter: "applied" }).data();

}

}

搜索栏中每次输入点击时都会调用此函数，并返回过滤后的数据