0
217
ViewsLa paginación no funciona al filtrar. ¿Cómo puedo arreglar?
Tengo una tabla de datos. Datatable tiene resultado y paginación. El resultado funciona bien, pero al filtrar, la paginación se mueve según el resultado. Esta es la página normal. 
Filtrado pero aún 9 página. Y resultado 10.
ahora el resultado es 20 pero página 5. Porque en el caso normal, cuando haces 20, se convierte en 5 páginas. ¿Cómo puedo arreglar?
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 answers
Answer question0
Puede intentar usar useEffect para tener un efecto secundario para el filtrado de filas. Todos los datos mostrados y el cálculo total de la página deben basarse en filas filtradas en lugar de filas originales.
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
Report
Answer question