Pagination with JS

Question

I want to make pagination with format like this: 1, 2, 3, ..., latest three.

This is my code:

let skip = null;
    if(pageCount > 10){
        skip = <li><span>...</span></li>
    }
for(let i = 1; i <= pageCount; i++) {

    if((i < page + 3 && i > page - 3)){
            result.push(
                <li key={i}>some link</li>
            );
            continue;
        } else if(skip){
            result.push(skip);
            skip = null;
        }
}

I have pageCount, which is for the example 20 and page, which is the number of the current page, for the example - 3.

I have tried many things, but still can't figure out how to do that.

The format that, I am trying to do is

if page=10, pageCount=20 :

8, 9, 10, ..., 18, 19, 20.

If page=1:

1, 2, 3, ..., 18, 19, 20.

If page=20:

1, 2, 3, ..., 18, 19, 20.

Gonsalo Sousa · Accepted Answer · 2019-06-10 17:34:08Z

1

you're close to the solution.

Maybe this will help you

function smartPagination(current, last){
    var delta = 2,
    left = current - delta,
    right = current + delta + 1,
    range = [],
    rangeWithDots = [],
    l;

    for (let i = 1; i <= last; i++) if (i == 1 || i == last || i >= left && i < right) range.push(i);

    for (let i of range) {
        if (l) {
            if (i - l === 2) rangeWithDots.push(l + 1);
            else if (i - l !== 1) rangeWithDots.push('...');
        }
        rangeWithDots.push(i);
        l = i;
    }

    return rangeWithDots;
}
//Outputs: [1, 2, 3, "...", 9, 10]

answered Jun 10, 2019 at 17:34

Gonsalo Sousa

4954 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WeiYuan · Accepted Answer · 2019-06-10 17:41:11Z

1

My solution is like as:

function p(page, pageCount = 20){
    pagination = []

    if(page - 3 < 0 || page > pageCount - 3)
        pagination = [1,2,3, '...',pageCount-2, pageCount-1, pageCount-0]

    else {
        for(let i = page-2; i <= page; i++) {
            pagination.push(i)
        }
        pagination.push('...',pageCount-2, pageCount-1, pageCount-0)
    }

    return pagination
}



console.log('page = 10 => ', p(10))
console.log('page = 1 => ', p(1))
console.log('page = 20 => ', p(20))

The results are:

page = 10 => (7) [8, 9, 10, "...", 18, 19, 20]
page = 1 => (7) [1, 2, 3, "...", 18, 19, 20]
page = 20 => (7) [1, 2, 3, "...", 18, 19, 20]

answered Jun 10, 2019 at 17:41

WeiYuan

5,9922 gold badges19 silver badges23 bronze badges

Comments

Marian Tarlungeanu · Accepted Answer · 2019-06-10 17:56:53Z

1

function getRange(page, pageCount, offset) {
  let results = [...Array(pageCount + 1).keys()];
  const skip = '...';

  results = results.slice(page, pageCount + 1);
  results.splice(offset, 0, skip);
  results.splice(offset + 1, results.length - (offset + 1) - offset);

  return results;
}

Outputs:
console.log(getRange(1, 20)); //[ 1, 2, 3, "...", 18, 19, 20 ] console.log(getRange(10, 20)); //[ 10, 11, 12, "...", 18, 19, 20 ]

answered Jun 10, 2019 at 17:56

Marian Tarlungeanu

3131 silver badge12 bronze badges

Collectives™ on Stack Overflow

Pagination with JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related