透過輸入搜尋關鍵字，使用 React.js 在 Bootstrap DataTable 中取得過濾後的數據

Question

我在我的 React 應用程式中使用引導資料表

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>
</>
)
}

現在資料已正確顯示，搜尋工作也完美，但是當使用者輸入搜尋並過濾表格記錄時我想要陣列。我不知道在處理反應應用程式時在 Bootstrap Datatable 中呼叫哪個方法。 例如，當使用者在搜尋框中輸入“A”時，應呼叫該方法並傳回數組，其中包含任何列中具有“A”值的物件。如何透過保留資料表功能來實現這一點？

Answer 1

剛剛得到答案

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

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

}

}

搜尋列中每次輸入點擊時都會呼叫此函數，並傳回過濾後的資料