js-pages in page bar

principle Three parts

I split the page bar into 3 parts. Previous page: Call Prepage () function next page: Call the NextPage () function with a digital ID, call the Skippage () function

prepage function

function Prepage () {
    var val = $ (' #pageLi li.active '). Text ();
    Gets the index value of the current Li
    (val = = 1) {return
        ;
    }
    var page = val-1;
    var ind = $ (' #pageLi li.active '). index ();
    Ele = $ (' #pageLi li '). EQ (ind-1). Children ();
    Console.log ("page:" + page + ", Ele:" + ele);
    Skippage (page, ele);

The function first determines whether it has been to the first, if it is already the first, no longer processing, otherwise, you need to get the value of the previous page of the current page and the Li control on the previous page, and finally call the Skippage () nextpage function

function NextPage (page) {
    var val = $ (' #pageLi li.active '). Text ();
    if (val = = $ (' #lastPage '). Text ()) {return
        ;
    }
    Gets the index value of the current Li
    var ind = $ (' #pageLi li.active '). index ();
    var page = number (val) + 1;

    Ele = $ (' #pageLi li '). EQ (Ind + 1). Children ();
    Console.log ("page:" + page + ", Ele:" + ele);
    Skippage (page, ele);

Next is the page down, first judgment time has been to the last page, if the last page, we are not processing, otherwise get the current page of the next page value and the ' Li ' control. skippage function

function skippage (ID, ele) {
    var page = $ (ele). text ();
    $ (' #pageLi Li '). Removeclass ("Disabled");
    $ (' #pageLi Li '). Removeclass ("active");
    $ (' #pageLi Li '). addclass ("active");
    $ (ele). Parent (). addclass ("active");
    Add an clickable style to the back button
    if (page = = 1) {
        $ (' #pageLi li:first '). addclass ("Disabled");
    Add the non-clickable style
    //Console.log ("Max page:" + $ (' #lastPage ') to the next page. Text ())
    if (page = = $ (' #lastPage '). Text ()) {
        $ ("#pageLi li:last-child"). AddClass ("Disabled");
        $ (' #lastLi '). addclass ("Disabled");
    $ (' #omitLi '). addclass ("Disabled");
    Refreshli (page, $ (ele). Parent (). index ());

The function first gets the page number value, and then it knows the class information for all the page numbers, add an active style to the page number you want to display, highlight it, and then determine if the previous and next pages are clickable, and when you're done, come to the most important step and update the page number on the page bar, because to meet the actual requirements, Each page can be selected, so look at the implementation of the Refreshli method. Refreshli function

function Refreshli (page, Ind) {
    Console.log ("total:" + $ (' #lastPage '). text ());
    if ($ (' #lastPage '). Text () <= {return
        ;
    }

    var left = false;
    if ($ ("#leftOmitLi"). Children (). Text () = = "...") {left
        = true;
    }
    var right = false;
    if ($ ("#omitLi"). Children (). Text () = = "...") {right
        = true;
    }
    Parse (left, right, Ind);

The function passed in 3 parameters: Left: Leave ellipsis exists right: whether there is an IND: the index value of the currently clicked Li

The standard of judgment is whether the text value in the control with the controls ID Leftomitli and Omitli is ... and then goes into our parse function parse function

Function Parse (left, right, Ind) {Console.log (' Left: + left + ', right: ' + right + ', Ind: "+ IND +
    ", TotalSize:" + $ (' #lastPage '). text ());
    Total pages var pagetotalsize = number ($ (' #lastPage '). text ()); if (!left && right) {///only left omitted if (Ind = = rightIndex-1) {//Right omitted first after left omitted, colleague right omitted left
            Side to +1//click on the left to omit the first, right omit the first one to +1 console.log ("click:" + $ (' #pageLi li '). EQ (Ind). Children (). Text ()) if ($ (' #pageLi li '). EQ (Ind). Children (). Text ()) = = pageTotalSize-4) {onlyleft (Pagelicou
            NT, pagetotalsize);
            else {rightfirstleftandright (IND); ' Else if ' (Ind < RIGHTINDEX-1) {//Click on the left, no page change/no do} else if (Ind
        > Rightindex) {//Right omitted, right omitted disappear, left ellipsis appears Onlyleft (Pagelicount, pagetotalsize); } else if (!right && left) {if Ind < LeftIndex) {//left omitted left, left omitted hour, right omitted appearing onlyright (Pagelicount, pagetotalsize); else if (Ind = = Leftindex + 1) {////left omitted first, right omitted, while left omitted first to right-1 if ($ (' #pageLi li '). EQ (Ind).
            Hildren (). Text () = = 4) {onlyright (Pagelicount, pagetotalsize);
            else {leftfirstleftandright (IND); ' Else if ' (Ind > leftindex + 1) {//no change/no do} ' else if (left & & right) {if (Ind < Leftindex) {//Click left omit left, left omitted hour, only Onlyright (Pagelicount, pag
        Etotalsize); else if (Ind = = Leftindex + 1) {//Click left omitted first, left omit first to right-1 if ($ (' #pageLi li '). EQ (Ind). Children
            (). Text () = = 4) {onlyright (Pagelicount, pagetotalsize);
            else {leftfirstleftandright (IND); ' Else if ' (Ind = = rightIndex-1) {//Click right to omit the first, right omit the first to the left to +1 Console.log ("click:" + $ (' #pageLi li '). EQ (Ind). Children (). Text ()) if ($ (' #pageLi li '). EQ (i
            nd). Children (). Text ()) = = pageTotalSize-4) {onlyleft (Pagelicount, pagetotalsize);
            else {rightfirstleftandright (IND); ' Else if ' (Ind > Rightindex) {//Click right ellipsis right, right omitted disappear, only left ellipsis onlyleft (Pagelicount, Pagetotal
        Size); }
    }
}

The function is a bit responsible, I changed the situation before the 3 kinds: There is left omitted there are left ellipsis, there is also a right to omit

There are a lot of things to do with each situation.

only left omitted

1. I now click Left to omit the left page number (that is, the 1,2 in the picture), should be changed to only have omitted the situation code as follows:

Only right ellipsis
function onlyright (Pagelicount, pagetotalsize) {
    console.log ("Onlyright");
    for (var i = 1; I <= rightindex i++) {
        if (i = = Leftindex) {
            $ (' #leftOmitLi '). Removeclass ("Disabled");
            $ (' #leftOmitLi '). Children (). text (leftindex);
        else if (i = = Rightindex) {
            $ (' #omitLi '). addclass ("Disabled");
            $ (' #omitLi '). Children (). Text ("...");
        else {
            $ (' #pageLi li '). EQ (i). Children (). text (i);}}

After processing, it becomes as follows:

2. If at this point I click on the left ellipsis to the right first, so what should be, should be changed to have left omitted, there is a right to omit, and two ellipses in the middle of the number to decrease by 1. And the clicked page number highlighting will be displayed because the page number is decremented. The code is as follows:

The first
function leftfirstleftandright (Ind) {
    console.log ("Leftfirstleftandright") is left and right, and left ellipsis to the right.
    var text = number (' #pageLi li '). EQ (Ind). Children (). Text ())-1;
    Console.log ("text:" + text)
    var d = 0;
    for (var i = Leftindex + 1, i < Rightindex i++) {
        $ (' #pageLi li '). EQ (i). Children (). Text (text + (d++));
    $ (' #pageLi li '). EQ (Leftindex + 1). Removeclass ("active");
    $ (' #pageLi li '). EQ (Leftindex + 2). addclass ("active");
    $ (' #leftOmitLi '). addclass ("Disabled");
    $ (' #leftOmitLi '). Children (). Text ("...");
    $ (' #omitLi '). addclass ("Disabled");
    $ (' #omitLi '). Children (). Text ("...");

The results of the processing are as follows:

But there's also a situation that needs to be judged when the middle of the first number and the right 2 difference two, such as the above I click once again 5, this time there are 4,5,6, and 4 and 2 difference 2, this time click 4, you need to leave omitted, because there is no extra number, Only a 3, you also hide what, so we made a judgment as follows, if this is just the case, directly into only the right to omit the case,

Left omitted the right first, appears right ellipsis, while left omitted the right first to 1
            if ($ (' #pageLi li '). EQ (Ind). Children (). Text () = 4) {
                Onlyright ( Pagelicount, pagetotalsize);
            else {
                leftfirstleftandright (IND);
            }

The effect of the change is as follows:

3. The third situation we do not deal with, the reasons for their understanding. only right omitted

1. Click on the left to omit the closest to the first, such as the figure above 7.
This time need to appear left omitted, then the middle part increments +1

There is also an exception to this place, that is, when the click of the point with the right to omit the first 2 on the right, we will also become only left omitted case, so the code made a judgment, as follows

if ($ (' #pageLi li '). EQ (Ind). Children (). Text ()) = = pageTotalSize-4) {
                onlyleft (Pagelicount, Pagetotalsize) ;
            } else {
                rightfirstleftandright (IND);
            }

The effect is as follows:

2. Click right to omit right, turn left omitted. So let's call the left ellipsis function onlyright

3. Click right to omit the left side except the nearest first, do not handle. Both left ellipsis, also have right omitted

This place actually covers all the above situations and no longer narrates the summary

When you do this page bar, it is easy to confuse the index value of Li and its asked text value is not associated with, so in the change of value to the text value to decrement (increase), can not be indexed value to decrement (increase).

Recently in writing a page, with JS handwriting a page bar effect

HTML code

<ul class= "pagination pagination-sm" id= "Pageli" > <li class= "Disabled" ><a "javascript:;" href= "Prepage ()" >&laquo;</a></li> <li class= "active" ><a href= "javascript:;" onclick= "Skippage (1,this)" >1</a></li> <li><a href= "javascript:;" onclick= "Skippage (2,this ">2</a></li> <li id=" Leftomitli "><a href=" javascript:; " onclick= "Skippage (3,this)" >3</a></li> <li><a href= "javascript:;" onclick= "Skippage (4,this ">4</a></li> <li><a href=" javascript:; "onclick=" Skippage (5,this) >5</a></li > <li><a href= "javascript:;" onclick= "Skippage (6,this)" >6</a></li> <li><a href = "javascript:;" onclick= "Skippage" (7,this) >7</a></li> <li class= "disabled" id= "Omitli" ><a href= "javascript:;" onclick= "Skippage (9,this)" >...</a></li> <li><a href= "jaVascript:; "onclick=" Skippage (11,this) ">11</a></li> <li><a href=" javascript:; "onclick=" Skippage (12,this) "id=" LastPage ">12</a></li> <li id=" Lastli "><a href=" javascript:; "OnClick = "NextPage ()" >&raquo;</a></li> </ul>

JS Code

Number of page bars var pagelicount = 10;
Left omitted the position of the var leftindex = 3;
To the right omit the position of the occurrence var rightindex = 8;

var totalpage = $ (' #lastPage '). Text ();
    function skippage (ID, ele) {var page = $ (ele). text ();
    var tablebody = $ ("#resultTable tbody");
    $ (' #pageLi Li '). Removeclass ("Disabled");
    $ (' #pageLi Li '). Removeclass ("active");
    $ (' #pageLi Li '). addclass ("active");
    $ (ele). Parent (). addclass ("active");
    Add an clickable style to the Back button if (page = 1) {$ (' #pageLi li:first '). addclass ("Disabled");
        //To "next" Add an Console.log ("Max page:" + $ (' #lastPage '). Text ()) if (page = = $ (' #lastPage '). Text ()) {
        $ ("#pageLi li:last-child"). AddClass ("Disabled");
    $ (' #lastLi '). addclass ("Disabled");
    }//$ (' #omitLi '). addclass ("Disabled");
    Refreshli (page, $ (ele). Parent (). index ());
                        $. Get ("/rs/resultbypage/" + page, function (response) {
            Console.log (response);            var data = eval (response);
                            if (data.length!= 0) {tablebody.html ("");
                                for (var i = 0; i < data.length i++) {console.log (data[i));
                                                $ ("<tr>" + "<td>"
                                                + data[i].id + "</td>"
                                                + "<td>" + data[i].uid
                                                + "</td>" + "<td>"
                                                + data[i].appversionentity.version + "</td>" + "<td>" +Data[i].appversionentity.productid + "</td>"
                                                + "<td>" + data[i].uploadtime
                                                + "</td>" + "<td>" + "<button type=\" button\ "class=\" btn btn-danger\ "onclick=\" deleteviewtypebyi D ("+ data[i].id +") \ "" ;"