Composition of the paging component

Without further ado, let’s take a look at the structure of a paging component. This analysis is actually more important than the actual logical judgment.

We can see this paging component:

Previous page and Next Page 2:2 Home page and last page 2:2 ellipses 2:2 Current page 1:1 On the left and right sides of the current page 2 x 2Copy the code

So the paging component is made up of 2 + 2 + 2 + 1 + 2 * 2 = 11 elements. Remember this number, call this variable baseCount, and we’ll use it again. Surprised to learn that the logic is actually 74% complete? But don’t worry, let’s go ahead and look at what parameters the paging component needs:

I’ve already marked the parameters, so you can see what these parameters mean, but I won’t explain them. BaseCount = 2 + 2 + 2 + 1 + 2 * around So 75% of this is done.

How do I use baseCount

We’ve got a very simple value: baseCount, but what does it do? In fact, it’s critical that we use this value to determine when the ellipsis appears in the paging component. For example, the component in the figure above, excluding the previous and next buttons on both sides, has a total of 11-2 = 9 elements in the middle part, that is, when the total number of pages <= 9, there is no need for ellipsis, because there is enough space, it can be completely displayed.80% progress, go on, when does the ellipsis come up? Well, that’s a good question, but it’s best to figure out what ellipses are for before deciding when to use them, which is the second and most important point of this article.

The role of ellipsis

Let’s start with a small question: 1… , three, four, five. What does the ellipsis stand for? Let’s say 2. Ellipsis replaces one element in the pagination component, but it doesn’t matter if the ellipsis replaces one element. So the correct use of the ellipsis would look like this: 1… ,4,5,6 (ellipsis is 2,3) or 6,7,8… ,12 (ellipsis stands for 9,10,11). So I think the function of the ellipsis is to replace at least 2 elements.

Next, look at where the ellipsis appears in the paging component. There are generally three cases. The initial example is one where the ellipsis appears on both sides.

1. Only in the back2. Only in the front

The ellipsis must be total > basecount-2, because there is not enough available space to show all the pages and ellipsis must be used instead.

A. First determine the situation where only the ellipsis appears after (the ellipsis is coming). First determine when the ellipsis happens to appear before it. According to what the ellipsis is doing, it’s replacing at least two elements. So we’re going to take the minimum value of 2, which is right before the ellipsis, and the more ellipses there are, the more cur there is.

Cur (1) + ellipsis (2) + cur (around) = 1 + 2 + around + 1 So when cur < startPosition there is no ellipsis, only an ellipsis after it.

EndPosition = end (total) – ellipsis minimum (2) – cur – 1 Cur > endPosition is preceded only by an ellipsis.

Ok, 95% of the logic is done, and there’s only one case where you have ellipses on both sides, so we don’t have to analyze it, except for the last two cases, which is when startPosition <= cur && cur <= endPosition.

How are the other positions displayed

Once you’ve analyzed the ellipsis, the rest is super easy, remember that important baseCount? I’m going to use it. I just got a baseCount of 11, because the previous page and the next page will always be there. We can forget about those two for a second, and just look at the nine positions that actually work in the middle.

We can see that when the ellipsis only follows, the last two available positions must be… And the total. So there are 9-2 = 7 positions left in front of the ellipsis, so we’ll call it ‘surplus’ and just display it from 1 to’ surplus’. In the same way, when the ellipsis appears only at the front, the first two positions must be 1 and… . So you go from (total-surplus) all the way to total.

Also, there are ellipses on both sides, the first two must be 1 and… And the next two must be… And the total. So the one in the middle is cur and the adjacent ones on the left and right.

When ellipsis is present, this logic ensures that the total number of elements required by the paging component is fixed and only around, and the recommended value around is 2 or 3. Here is a method to generate the corresponding array of paging components for your reference:

/ * * * *@param {Number} total 
 * @param {Number} cur 
 * @param {Numbre} around 
 */
const makePage = (total,cur,around) = > {
    let result = [];
    let baseCount = around * 2 + 1 + 2 + 2 + 2; // Total number of elements
    let surplus = baseCount - 4; // There is only one ellipsis left
    let startPosition = 1 + 2 + around + 1;// the ellipsis appears before the critical point
    let endPosition = total - 2 - around - 1;// the ellipsis point appears after

    if(total <= baseCount - 2) {// No ellipsis is displayed
        result =  Array.from({length: total}, (v, i) = > i + 1);
    }else{ // Ellipses need to appear
        if(cur < startPosition){ //1. Only ellipses appear after it
            result = [...Array.from({length: surplus}, (v, i) = > i + 1),"...",total]
        }else if(cur > endPosition) { //2. Only ellipses appear before
            result = [1.'... '. Array.from({length: surplus}, (v, i) = > total - surplus + i + 1)]}else{ //3. Ellipses on both sides
            result = [1.'... '. Array.from({length: around * 2 + 1}, (v, i) = > cur - around + i),'... ',total]
        }
    }

    return result
}
makePage(8.2.2);//[1, 2, 3, 4, 5, 6, 7, 8]
makePage(20.3.2);//[1, 2, 3, 4, 5, 6, 7, "...", 20]
makePage(20.10.2);//[1, "...", 8, 9, 10, 11, 12, "...", 20]
makePage(20.19.2);//[1, "...", 14, 15, 16, 17, 18, 19, 20]
Copy the code

conclusion

You can use react, Vue, or native JS to determine what pages to display. The logic is the same.