pagination calculation algorithm

11,959

Solution 1

To round for the max value, you can use Math.ceil on last_page.

The items per page can be static, manually defined. Then, from can be ((currentPage - 1) * itemsPerPage) + 1.

  • If current page is 1, ( (1 -1) * 5) + 1 = 1.
  • Second page: ( (2 -1) * 5) + 1 = 6, and so on.

Then it can be currentPage * itemsPerPage. Eg if the current page is 1, then 1 * 5 = 5, if its the second page it will be: 2 * 5 = 10. Look below for an example:

var pagination = {
 total: result.length,
 per_page: itemsPerPage,    
 current_page: currentPage, 
 last_page: Math.ceil(result.length / itemsPerPage),
 from: ((currentPage -1) * itemsPerPage) + 1,
 to: currentPage  * itemsPerPage
};
Total = 15;
per_page = 5;
currentPage = 1;
last_page = truncate (15 / 5) = 3;
from: ((1-1) * 5) + 1 = 1 //first page
      ((2-1) * 5) + 1 = 6 //second page
to: 1 * 5 = 5 //first page
    2 * 5 = 10 // second page
From 1 to 5 // first page
From 6 to 10 // second page
From 11 to 15 // last page

Solution 2

The answer above in the form of a function:

function pagination(length, currentPage, itemsPerPage) {
    return {
        total: length,
        per_page: itemsPerPage,
        current_page: currentPage,
        last_page: Math.ceil(length / itemsPerPage),
        from: ((currentPage - 1) * itemsPerPage) + 1,
        to: currentPage * itemsPerPage
    };
};

Solution 3

last_page should use Math.ceil(), so that there is no floating point number. 0.4 will be 1 then, which is correct. from should be itemsPerPage * (pageNumber - 1) - this assumes that the value is 0-based and the pageNumber starts at 1. to should then be Math.min() of itemsPerPage * pageNumber and total.length, so that either the from-count plus itemsPerPage is used or, if this value is bigger than the total item count, the total item count is used.

Share:
11,959
Alvin
Author by

Alvin

Updated on June 16, 2022

Comments

  • Alvin
    Alvin about 2 years

    I am trying to calculate pagination:

    var pagination = {
     total: result.length,
     per_page: itemsPerPage,    // required
     current_page: currentPage, // required
     last_page: users.length / itemsPerPage,    // required
     from: (itemsPerPage * pageNumber) + 1,
     to: itemsPerPage * (pageNumber + 1)           //required
    };
    

    Let say the result length is 2, itemsPerPage is 5, currentPage is 1, I got this:

    total: 2
    per_page: 5
    current_page: 1
    last_page: 0.4
    from: 6
    to: 10
    

    I think something is not right.

  • Dimitri Kopriwa
    Dimitri Kopriwa almost 4 years
    This to is wrong, see it live on snack.expo.io/6kaxfQGzP , in this example I have 9 entries, the last page should have to=8 because list length is 8, and in the demo it is written 9 which is the last available row and not the last entry.
  • Dimitri Kopriwa
    Dimitri Kopriwa almost 4 years
    This calculate the right to using the offset : const offset = total % perPage; const to = (page + 1) * perPage - (page + 1 === numberOfPages && offset !== 0 ? perPage - offset : 0);
  • user115014
    user115014 about 3 years
    Thanks for adding this function, a guard could be added so that to doesn't print wrong result on the last page, e.g. to: currentPage * itemsPerPage < length ? currentPage * itemsPerPage : length