jquery案例之分页

1.固定分页

固定1到10,11到20…（类似百度底部的分页）
点击上一页和下一页时：
以20页为例
索引0到6或者16到20时，每点击上一页或下一页的按钮，固定每次显示的值不变，只变当前索引的样式
其余：在固定索引5即中间位置处的样式不变，但每次显示的10个值都会动态变化

		$(".down").click(function () {
            nowpage++;
            if(nowpage>totalpage){
                nowpage=totalpage;
                return;
            }
            if(nowpage<7||nowpage+4>totalpage){
                $(".page").eq(nowpage%10-1).addClass("ck").prev().toggleClass("ck");
            }
            else{
                $(".page").each(function (index) {
                    $(this).html(index+nowpage-5);
                })
            }
            console.log(nowpage);
        });
        $(".up").click(function () {
            nowpage--;
            if(nowpage<1){
                nowpage=1;
                return;
            }
            if(nowpage<6||nowpage+4>=totalpage){
                $(".page").eq(nowpage%10-1).addClass("ck").next().toggleClass("ck");
            }
            else{
                $(".page").each(function (index) {
                    $(this).html(index+nowpage-5);
                })
            }
            console.log(nowpage);
        });

点击页码事件
同样分为上述三种情况
0到6 时： 显示1到10
16到20时：显示11到20
其余：数值动态变化，但给固定中间位置加样式

$(".page").click(function () {
            nowpage=parseInt($(this).html());
            console.log(nowpage);
            if(nowpage>=6&&nowpage<=totalpage-4){
                $(".page").map(function (index,ele) {
                    $(ele).html(nowpage-5+index)
                });
                $(".page").eq(5).addClass("ck").siblings().removeClass("ck");
            }
            else if(nowpage+4>totalpage){
                $(".page").map(function (index,ele) {
                    $(ele).html(totalpage-9+index);
                });
                $(".page").eq(nowpage%10-1).addClass("ck").siblings().removeClass("ck");
            }
            else {
                //nowpage<6
                $(".page").map(function (index,ele) {
                    $(ele).html(index+1)
                });
                $(".page").eq(nowpage%10-1).addClass("ck").siblings().removeClass("ck");
            }
        })

2.动态缩页

这种分页不能像上面一样，直接固定创建dom。随着当前页数的变化，需要动态创建dom
分为前缩、前后缩、后缩

		$(".pages").html(create(nowpage,totalpage));
        function create(now,all){
            var str="";
            str+="<li class='up'>上一页</li>";
            for(var i=1;i<=all;i++){
           
                if(i==2&&now-3>i){
                    i=now-3;
                    str += "<li class='pageli'>...</li>";
                }
                else if(i==now+3&&now+3<all){
                    i=all-1;
                    str += "<li class='pageli'>...</li>";
                }
                else{
                    if(i==now) {
                        str += "<li class='ck pageli'>" + i + "</li>";
                    }

                    else{
                        str+="<li class='pageli'>"+i+"</li>";
                    }
                }
            }
            str+="<li class='down'>下一页</li>";
            return str;
        }

        //下一页 上一页
        updown();
        function updown() {
            $(".up").click(function () {
                nowpage--;
                if(nowpage<1){
                    nowpage=1;
                }
                $(".pages").html(create(nowpage,totalpage));
                updown();
            });
            $(".down").click(function () {
                nowpage++;
                if(nowpage>totalpage){
                    nowpage=totalpage;
                }
                $(".pages").html(create(nowpage,totalpage));
                updown();
            });
        }