0
221
VistasPagination does not work when filtering. How can i fix?
i have one datatable. Datatable has result and pagination. Result works fine, but when filtering, pagination moves according to result. This is normal page.
Filtering but still 9 page. And result 10.
now result 20 but page 5. Because in normal case, when you make 20, it becomes 5 pages. How can i fix?
const [currentPage, setCurrentPage] = useState(1);
const [select, setSelect] = useState(10);
function handleChange(e) {
setSelect(e.target.value);
}
const indexOfLast = currentPage * select;
const indexOfFirst = indexOfLast - select;
const splitData = rows.slice(indexOfFirst, indexOfLast);
const totalPages = Math.ceil(rows.length / select);
const renderHeadingRow = (item) => {
return <td>{item}</td>;
};
const renderRow = (item, index) => {
console.log(splitData[index])
return (
<tr key={index}>
{splitData[index]
?.filter((val) => {
if (searchWord == "") {
return val;
}
else if(item[1].toLowerCase().includes(searchWord.toLowerCase())){
return val
}
else if(item[2].toLowerCase().includes(searchWord.toLowerCase())){
return val
}
else if(item[5].toLowerCase().includes(searchWord.toLowerCase())){
return val
}
})
.map((data, no) => {
return <td>{splitData[index][no]}</td>;
})}
</tr>
);
};
const theadData = <tr>{heading.map(renderHeadingRow)}</tr>;
const tbodyData = splitData.map(renderRow);
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You can try to use useEffect to have a side-effect for row filtering. All your displayed data and total page calculation need to rely on filtered rows instead of original rows.
const [currentPage, setCurrentPage] = useState(1);
const [select, setSelect] = useState(10);
const [filteredRows, setFilteredRows] = useState(rows || [])
function handleChange(e) {
setSelect(e.target.value);
}
React.useEffect(() => {
const updatedCurrentPage = 1
const updatedRows = rows.filter((item) => {
if (searchWord == "") {
return item;
}
else if(item[1].toLowerCase().includes(searchWord.toLowerCase())){
return item;
}
else if(item[2].toLowerCase().includes(searchWord.toLowerCase())){
return item;
}
else if(item[5].toLowerCase().includes(searchWord.toLowerCase())){
return item;
}
})
const totalPages = Math.ceil(updatedRows.length / select);
setFilteredRows(updatedRows) //set filtered rows when `searchWord` changes
setCurrentPage(1) //reset current page to 1 if applying filters
}, [searchWord])
const renderHeadingRow = (item) => {
return <td>{item}</td>;
};
const renderRow = (item, index) => {
return (
<tr key={index}>
{
item.map((data) => {
return <td>{data}</td>;
})}
</tr>
);
};
const indexOfLast = currentPage * select;
const indexOfFirst = indexOfLast - select;
const splitData = filteredRows.slice(indexOfFirst, indexOfLast); //use `filteredRows` for display
const totalPages = Math.ceil(filteredRows.length / select); //use `filteredRows` to calculate total pages
const theadData = <tr>{heading.map(renderHeadingRow)}</tr>;
const tbodyData = displayedRows.map(renderRow);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta