Get filtered data in Bootstrap DataTable using React.js by entering search keywords
P粉432906880
P粉432906880 2024-02-03 23:29:58
0
1
349

I'm using bootstrap data tables in my 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>
</>
)
}

Now the data is displayed correctly and the search works perfectly, but I want the array when the user enters the search and filters the table records. I don't know which method to call in Bootstrap Datatable while working on react app. For example, when the user enters "A" in the search box, the method should be called and return an array containing objects with an "A" value in any column. How can I achieve this by retaining the datatable functionality?

P粉432906880
P粉432906880

reply all(1)
P粉691958181

Just got the answer

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

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

}

}

This function will be called every time an input is clicked in the search bar, and the filtered data will be returned

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template