js implementation of paging effect example

I believe everyone has used Baidu to search for the information we want. Every time we search for something, Baidu will return us many, many similar and related results, and it is impossible to display all of these results on one page. , usually divided into many pages. The rendering is as follows. So today we are going to share how this paging effect is achieved.

First we observe this paging

1. The number of page numbers displayed on one page is fixed

2. When the current page number is greater than or equal to 2, start displaying the 'Previous Page' button. When the total number of pages is greater than or equal to 1 than the currently displayed page number, start displaying the 'Next Page' button.

3. If we want to add 'Home' and 'Last Page' buttons, then when the home page cannot be displayed on the page, add a 'Home' button. Add a 'Last Page' button if the last page cannot be displayed on the page.

4. After the above situation is determined, it is time to subdivide it and discuss it based on the situation. First, we divide it into two major situations: when the number of pages displayed on the page is greater than or equal to the total number of pages, and when the number of pages displayed on the page is less than the total number of pages. The former situation is relatively simple and will not be explained in detail. It is mainly divided into three situations when the total number of pages is larger than the number of pages that can be displayed on the page: 1. The page number of the current page is less than or equal to the number of pages that can be displayed on the page. When one-half of the number 2, when the current page is the last few pages, and other situations except the above two situations.

The text description may be a bit difficult to understand, so let’s go directly to the example. There are detailed comments in js for easy understanding (first of all, the number of pages displayed on the page is 5. As for the How many pages should be obtained dynamically through ajax in the actual project, and then the total number of pages will be automatically obtained based on the amount of data. In order to facilitate understanding, I use simulated data here)

HTML code:

The

<ul id="ul1"></ul>
<p id="p1">
    <!--<a href="#1">首页</a>
    <a href="#3">上一页</a>
    <a href="#2">[2]</a>
    <a href="#3">[3]</a>
    <a href="#4">4</a>
    <a href="#5">[5]</a>
    <a href="#6">[6]</a>
    <a href="#5">下一页</a>
    <a href="#10">尾页</a>-->
</p>

comment part is what we want to add dynamically through js.

CSS code:

    <style>
        *{ margin:0; padding:0;}
        li{ list-style:none;}
        #ul1{ width:600px; height:250px;}
        #ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px;}
        a{ margin:5px;}
    </style>

js code:

    var json = {
        title : [
            '效果1',
            '效果2',
            '效果3',
            '效果4',
            '效果5',
            '效果6',
            '效果7',
            '效果8',
            '效果9',
            '效果10',
            '效果11',
            '效果12',
            '效果13',
            '效果14',
            '效果15',
            '效果16',
            '效果17',
            '效果18',
            '效果19',
            '效果20',
            '效果21',
            '效果22',
            '效果23',
            '效果24',
            '效果25',
            '效果26',
            '效果27',
            '效果28',
            '效果29',
            '效果30',
            '效果31',
            '效果32',
            '效果33',
            '效果34',
            '效果35',
            '效果36',
            '效果37',
            '效果38',
            '效果39',
            '效果40',
            '效果41',
            '效果42',
            '效果43',
            '效果44',
            '效果45',
            '效果46',
            '效果47',
            '效果48',
            '效果49',
            '效果50',
            '效果51'
        ]
    };

    var arr=[];
    var iNow = 9;
    page({
        id:'p1',
        nowNum:1,
        allNum:Math.floor(json.title.length/10),
        callBack:function(){alert(0)}
    });

    function page(opt){
        if(!opt.id){
            return false;
        }
        var obj = document.getElementById(opt.id);
        var nowNum = opt.nowNum||1;
        var allNum = opt.allNum||5;
        var callBack = opt.callBack||function(){};
        if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时
            var oA = document.createElement('a');
            oA.href = '#1';
            oA.innerHTML = '首页';
            obj.appendChild(oA);
        }
        if(nowNum>=2){//只要页码大于等于2就会出现上一页
            var oA = document.createElement('a');
            oA.href = '#'+(nowNum - 1);
            oA.innerHTML = '上一页';
            obj.appendChild(oA);
        }
        if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全
            for(var i=1;i<=allNum;i++){
                var oA = document.createElement(&#39;a&#39;);
                oA.href = &#39;#&#39;+i;
                if(nowNum==i){
                    oA.innerHTML = i;
                }else{
                    oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;;
                }
                obj.appendChild(oA);
            }
        }
        else{//下面的情况是当总页码大于5的时候进行的分类
            for(var i=1; i<=5;i++){
                var oA = document.createElement(&#39;a&#39;);
                if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候
                    oA.href = &#39;#&#39;+i;
                    if(nowNum ==i){
                        oA.innerHTML = i;
                    }else{
                        oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;
                    }
                }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式
                    oA.href = &#39;#&#39;+(allNum - 5+i);
                    if((allNum - nowNum)==0&&i==5){
                        oA.innerHTML = (allNum - 5 + i);
                    }else if((allNum - nowNum)==1&&i==4){
                        oA.innerHTML = (allNum - 5 +i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(allNum - 5 +i)+&#39;]&#39;
                    }
                }else{//当前页码处在5个页码的中间的时候
                    oA.href = &#39;#&#39;+(nowNum - 3 +i);
                    if(i==3){
                        oA.innerHTML = (nowNum - 3 + i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(nowNum - 3 +i)+&#39;]&#39;
                    }
                }
                obj.appendChild(oA);
            }
        }
        if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+(nowNum+1);
            oA.innerHTML = &#39;下一页&#39;;
            obj.appendChild(oA);
        }
        if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+allNum;
            oA.innerHTML = &#39;尾页&#39;;
            obj.appendChild(oA);

        }
        callBack(nowNum,allNum);
        var aA = obj.getElementsByTagName(&#39;a&#39;);
        for(var i=0; i<aA.length;i++){
            aA[i].onclick = function(){
                var nowNum = parseInt(this.getAttribute(&#39;href&#39;).substring(1));//得到当前的页码数
                obj.innerHTML = &#39;&#39;;
                page({
                    id : opt.id,
                    nowNum : nowNum,
                    allNum : allNum,
                    callBack : callBack}

                );
                return false;
            }
        }
    }

Related recommendations:

About the simple implementation of php paging code

php implements Baidu-like paging

How to create paging effect with jquery

The above is the detailed content of js implementation of paging effect example. For more information, please follow other related articles on the PHP Chinese website!