JavaScript: An idea of implementing page bar on webpage

Introduction

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

Design

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:

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

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

Ok then ... how we implement that?

Let's get started with JavaScript!

First, the pseudo code:

1. 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);
   JavaScript

   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>';

2. 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")
   JavaScript

   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
   }

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

   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
   }

4. 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)