超简单实用的前端分页---jquery插件

时间：2021-02-24 08:04:58

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.

　　简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;

　　而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.

最近,下载了很多前端分页插件.感觉性价比不是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件

这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互相讨论,一起上进.

超简单实用的前端分页---jquery插件

 

这是效果图.看起来一般,但是他的css可重塑性高

接下来将附上自己的代码.

css代码

#pages{
    overflow: hidden;
}
.lf{
    float: left;
    height: 28px;
    line-height: 28px;
}
.rt{
    float: right;
}
#mid{
    margin: 0 5px;
    overflow: hidden;
}
#mid>span{
    float: left;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #ccc;
    margin: 5px;
}

.btn{
    margin: 0 10px;
    color: #fff;
    background-color: #000;
    display: inline-block;
    padding: 1px 6px;
    /*margin-bottom: 0;*/
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn:hover,.btn:focus{
    color: #fff;
}
span:hover{
    cursor: pointer;
}
.hover{
    background-color: #000000;
    color: #fff;
}



html代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/pagination.css"/>
    <script src="js/jquery-1.11.3.js"></script>
    <title></title>
</head>
<body>
<div>
    <ul id="demoContent">
    </ul>
    <!--分页层-->
        <div id="pages">
        </div>

</div>
<script src="js/pagination.js"></script>
<script>
var datas=[
    {"did":1,"name":"习总书记会见韩国总统朴槿惠(图)","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":2,"name":"中美元首杭州会晤的成果清单公布","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":3,"name":"*出席东亚峰会传递什么信号？","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":4,"name":"中国在G20开出了药：就这19个字 能拯救世界","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":5,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":6,"name":"许达哲任湖南省代理省长(图/简历)","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":7,"name":"工信部回应徐玉玉案：个别电信企业罔顾社会责任","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":8,"name":"国产新型森林灭火弹首飞试验成功(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":9,"name":"印度“藏人难民”处境艰难 为生计冒充其他民族","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":10,"name":"韩媒：朝鲜向半岛东部海域发射3枚弹道导弹","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":11,"name":"外媒：杜特尔特宣布菲律宾进入“无法律状态”","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":12,"name":"男生摆999个柚子表白师姐遭拒 柚子被抢光(图)","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":13,"name":"东北这个学校的开学典礼堪比阅兵 还有飞行方阵","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":14,"name":"现场：上百河马群大战百余条鳄鱼群 到底哪方赢了？","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":15,"name":"G20 国宴菜单曝光 四道杭帮菜与张裕葡萄酒绝配","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":16,"name":"舒淇摄影师还原拍婚纱全过程 新娘唯一要求竟是…","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":17,"name":"徐峥带7岁女儿游泳 好爸爸一路背包还拍照","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":18,"name":"越南在南海搞大动作，美国急喊停","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
    {"did":19,"name":"一图看懂马云如何报KFC一箭之仇","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
    {"did":20,"name":" 凤凰新闻客户端 积分换礼","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
    {"did":21,"name":"杨洋靠的不只是这张“初恋脸”！","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"}
];
var options={
    id:"pages",//显示分页层按钮的id
    showcount:5,//记录显示列表的数量
    shownum:3,//记录点击按钮显示个数
    data:datas,//要处理的数据
    callback:function(data){
        var cHtml="";
        for(var i=0;i<data.length;i++){
            cHtml+="<li>"+ data[i].name+"</li>";//处理数据
        }
        $("#demoContent").html(cHtml);//将数据增加到页面中
    }
};
pageObj.init(options);
</script>
</body>
</html>

js代码

var pageObj={
        showCount:0,//记录显示列表的数量
        showNum:0,//记录点击按钮显示
        NUM:0,//测试分页总的显示数量
        clickNum:0,//记录点击的次数
        clickPage:1,//页面的点击默认为第一页
        DATA:null,//保存传过来的数据
        ID:null,//包存分页层的id
    init:function(options){
        this.ID=options.id;
        this.showCount=options.showcount;
        this.showNum=options.shownum;
        this.DATA=options.data;
        this.NUM=this.DATA.length%this.showCount==0?this.DATA.length/this.showCount:parseInt(this.DATA.length/this          .showCount)+1;
        this.viewPage();
        this.addPageNum();
        this.clickLeft();
        this.clickRight();
        this.shouClick();
        this.endClick();
        this.clickSpan();
    },
    //设置分页按钮及显示按钮的个数
    addPageNum:function(){
        var html='<div class="lf"><button id="shou" type="button" class="btn">首页</button><span                            id="left"><<</span></div><div class="lf" id="mid">';
        for(var i=0;i<this.NUM;i++){
            if(i==0){
                html+="<span i='"+(i+1)+"' class='hover'>"+(i+1)+"</span>";
            }else{
                html+="<span i='"+(i+1)+"'>"+(i+1)+"</span>";
            }
        }
        html+='</div> <div class="lf"><span id="right">>></span><button id="wei" type="button" class="btn">尾页             </button></div>';
        $("#"+this.ID).html(html);
        var width=parseInt(this.showNum)*(parseInt($("#mid>span").css("width"))+10);//10位span的margin值
        $("#mid").css("width",width);
    },
    //点击右侧按钮
    clickRight:function(){
        var me=this;
        $("#right").click(function(){
            me.clickNum<me.NUM- me.showNum&&me.clickNum++;
            if(me.clickNum>0){
                $("#mid>span:eq("+ (me.clickNum-1)+")").hide();
                $("#mid>span:eq("+ (me.clickNum)+")").show().attr("class","hover").siblings().removeClass();
            }
            me.clickPage=me.clickNum+1;
            me.viewPage();
        });
    },
    //点击左侧按钮
    clickLeft:function(){
        var me=this;
        $("#left").click(function(){
            me.clickNum>0?me.clickNum--:me.clickNum=0;
            $("#mid>span:eq("+me.clickNum+")").show().attr("class","hover").siblings().removeClass();
            me.clickPage=me.clickNum+1;
            me.viewPage();
        });
    },
    //点击分页数字
    clickSpan:function(){
        var me=this;
        $("#mid>span").click(function(){
            $(this).attr("class","hover").siblings().removeClass();
            me.clickPage=$(this).attr("i");
            me. viewPage();
        })
    },
    //点击首页
    shouClick:function(){
        var me=this;
        $("#shou").click(function(){
            me.clickNum=0;
            $("#mid>span").show();
            $("#mid>span:eq("+0+")").attr("class","hover").siblings().removeClass();
            me.clickPage= 1;
            me.viewPage();
        })
    },
    //点击尾页
    endClick:function(){
        var me=this;
        $("#wei").click(function(){
            me.clickNum= me.NUM- me.showNum;
            for(var k=0;k<me.clickNum;k++){
                $("#mid>span:eq("+k+")").hide();
            }
            $("#mid>span:eq("+(me.NUM-1)+")").show().attr("class","hover").siblings().removeClass();
            me.clickPage= me.NUM;
            me. viewPage();
        })
    },
    //页面显示功能
    viewPage:function(){
            var cHtml="";
            if(this.clickPage==this.NUM){
                var result=this.DATA.slice((this.clickPage-1)* this.showCount,this.DATA.length);
                options.callback(result);
            }
            else{
                var result=this.DATA.slice((this.clickPage-1)*this.showCount,(this.clickPage-1)*this.showCount+this                            .showCount);
                options.callback(result);
            }
    }
};


其实引入js后配置只需两步
1.var options={
    id:"pages",//显示分页层按钮的id
    showcount:5,//记录显示列表的数量
    shownum:3,//记录点击按钮显示个数
    data:datas,//要处理的数据
    callback:function(data){
        var cHtml="";
        for(var i=0;i<data.length;i++){
            cHtml+="<li>"+ data[i].name+"</li>";//处理数据
        }
        $("#demoContent").html(cHtml);//将数据增加到页面中
    }
};
2.pageObj.init(options);
只需两步,您就可以使用本插件了,还等什么,你帮我找问题吧

 

标签：

相关文章