我在我的 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”值的对象。如何通过保留数据表功能来实现这一点?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
刚刚得到答案
if(tableSave){ tableSave.on("search.dt", function() { //filtered rows data as an arrays let data = tableSave.rows({ filter: "applied" }).data(); } }搜索栏中每次输入点击时都会调用此函数,并返回过滤后的数据