Question

0

212

Views

Pagination 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);

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-07T01:12:48.652Z

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);

0

212

Pagination does not work when filtering. How can i fix?

1 answers

0

Find remote jobs

Andres GPT