Tuesday, 28 September 2021

How to show pagination dot dot after certain numbers in node.js & react

I want to show pagination numbers compressed like 1,2,3 ... 56, 57, please see this attached screenshot of my current situation and what I am expecting

enter image description here

below are my API codes and frontend codes which have been done for pictures showing.

// Backend

const totalPages = Math.ceil(totalPages / limit);
res.send({
  posts,
  totalPages,
});

// Output

totalPages = 107;
posts = 2140;

// Frontend

const pager = () => {
  const paginate = [];
  for (let i = 1; i <= totalPages; i++) {
    // console.log('000')
    paginate.push(
      <Link href={`?page=${i}`} key={i}>
        <a>{i}</a>
      </Link>
    );
  }
  return paginate;
};

I think I can explain what I want but if you have any confusion please let me know in the comment.

Thanks in advance.

Update based on answer

enter image description here

Please see this screenshot, after 3 should come 4, 5 then ... and so on.

Based on @Andy



from How to show pagination dot dot after certain numbers in node.js & react

No comments:

Post a Comment