(untagged)

JavaScript: An idea of implementing page bar on webpage

Clivic TR

0.00/5 (No votes)

16 Dec 2016

Features : There are NO Next Page or Prev Page buttons, user just clicks the page buttonAlways showing first page button and the last page button, omitting intermediate ones replaced by an ellipsis.

Introduction

A page tool for website users to switch to next or previous pages. Its use is very clear.

Design

Current page is the first page: no "span" stuff. So does the last page

When the current page is not at either of the extremity, it always appears at the middle of the span which prescribes the length of displaying middle pages:

Displaying the middle pages, meanwhile showing the first and the last

after click another page in the span, it will turn to that page, putting it to the middle of the span.

Current page always in the center

And span can be changed only through a variable(or constant)

A span of 7 pages

Ok then ... how we implement that?

Well, first we estimate possible situations:

(*[number] means the current page, which is the highlighted one in the pics above;

each number means the white page button in the pics above

& we suppose the span = 5 the total = 10)

A: left(pages including the first page and those in the span) + ... + total

[1] 2 3 4 5 6 ... 10

1 [2] 3 4 5 6 ... 10

1 2 [3] 4 5 6 ... 10 (now a "span" appears)

1 2 3 [4] 5 6 ... 10 ("span" begins to move rightward)

B: 1 + ... + span + ... + total

1 ... 3 4 [5] 6 7 ... 10 (cur should be in the center, instead of: 1 ... 3 [4] 5 6 7 ... 10)

1 ... 4 5 [6] 7 8 ... 10

C: 1 + ... + right (whose length is also span+1)

1 ... 5 6 [7] 8 9 10

1 ... 5 6 7 [8] 9 10

1 ... 5 6 7 8 [9] 10

1 ... 5 6 7 8 9 [10]

Umm... seems good but if: there is only 7 pages?(<= span + 2)

D: if total is less than or equal to span, than 1 + span + total; current is not in the center

[1] 2 3 4 5 6 7

1 [2] 3 4 5 6 7

1 2 [3] 4 5 6 7

1 2 3 [4] 5 6 7

1 2 3 4 [5] 6 7

1 2 3 4 5 [6] 7

1 2 3 4 5 6 [7]

This is for the LOGIC part. Pretty foolproof huh? XD

Let's get started with JavaScript!

First, the pseudo code:

Denote the most left page in the "span" as "spanL"; spanL = cur - Math.floor(span/2); And the the most right page in the "span" as "spanR"; spanR = cur + Math.floor(span/2);

when spanL >=3, "1... "shows up
when spanR <= total - 2, "...total" shows up
 
create three strings to add up: "prefix", "span", and "postfix"
prefix ='<a href = "javascript:;" class="tcdNumber">1</a>' + '<span> ... </span>';
span = ''; // to be determined later by spanL and spanR
postfix = '<span> ... </span>' + '<a href = "javascript:;" class="tcdNumber">'+ total +'</a>' + '<span> ... </span>';

Decide which plan to execute (Plan A, B, C, D are those described above), and reset the span of the "span" (reset the value of spanL and spanR and decide whether to add "1 ..." or "... total")

if(total <=span)
    execute Plan D
else
{
    if(spanL >=3)
        if(spanR <=total-2)
            execute Plan B
        else
            execute Plan C
    else
        if(spanR <=total-2)
            execute Plan A
        else
            execute Plan D
}

After establishing which way the page bar will look like(among the 4 ways described above), we add the page buttons in the "span":

for(var i = spanL; i < spanR; i++)
{
    if (i == cur)
        spanToWrite +='<span class="current">' + i + '</span>'; // Highlight the current button
    else
        spanToWrite +='<a href = "javascript:;" class="tcdNumber">' + i + '</a>'; // paint other buttons
}

Finally we add up all the statements then to write

obj.append(prefix + spanToWrite + postfix); // html documents written on the webpage

To Implement

In the codes below, we can change the length of "span"(the pages displayed in the middle) just by change the value of PAGE_SPAN (you can also turn it to a variable if you wish)

return (function ()  {
    obj.empty();
    
    var cur = args.current;
    var total = args.pageCount;
    var spanL = cur - Math.floor(PAGE_SPAN / 2);
    var spanr = cur - Math.floor(PAGE_SPAN / 2);
    var prefix = '<a href="javascript:;" class="tcdNumber">1</a>
        + '<span style="font=weight: 900; font-size:20px; font-color:#1C83BF">...</span?';
    var postfix = 'span style="font-weight: 900; font-size:20px; color::#1C83BF">...</span>'
        + '<a href="javascript:;" class="tcdNumber">' + total + '</a>'
    var spanToWrite = '';
    
    if (total <= PAGE_SPAN)  {
        // condensedInBothSidesSpan
        prefix = '';
        postfix = '';
        spanL = 1;
        spanR = total;
    }
    else {
        if (spanL >= 3) {
            if (spanR <= total - 2) {
                // prefix + span + postfix
                // Need to do nothing. 
            }
            else {
                // prefix + expandedRightSpan
                postfix = '';
                spanL = total - PAGE_SPAN;
                spanR = total;
            }
        }
        else {
            if (spanR <= total - 2) {
                // expandedLeftSpan + postfix
                prefix = '';
                spanL = 1;
                spanR = 1 + PAGE_SPAN;
            }
            else {
                // condensedInBothSidesSpan
                prefix = '';
                postfix = '';
                spanL = 1;
                spanR = total;
            }
        }
    }
    
    for (var i = spanL; i <= spanR; i++) {
        if (i == cur)
            spanToWrite += '<span class="current">' + i + '</span>';
        else
            spanToWrite += '<a href="javascript:;" class="tcdNumber">' + i + '</a>';
    }
    
    obj.append(prefix + spanToWrite + postfix);
})();

Hope it will be helpful! :)

(This is from my google blog: http://splashing-spray.blogspot.com/2016_07_01_archive.html)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here