分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片预览功能</title>
<script src="jquery-2.1.1.js" ></script>
</head>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
}
body{
width: 80%;
margin-left: 5%;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #000;
}
#inner ul li{
float:left;
}
#inner ul li {
width: 35px;
height: 35px;
line-height: 35px;
background: #fff;
margin-right: 2px;
text-align: center;
cursor: pointer;
border:1px solid #f9f9f9;
}
#inner ul .not{
cursor: default;
}
#inner ul li a{
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
}
#inner ul .pre,#inner ul .next{
width: 70px;
}
#inner ul li:hover{
border:1px solid #FF4400;
color:#FF4400;
}
#inner ul .not:hover{
border:1px solid #f9f9f9;
color:#000;
}
#inner ul .hide{
    display: none;
}
#inner ul .current:hover{
border:1px solid #f9f9f9;
color:#fff;
}
#inner ul .current{
background: #FF4400;
cursor: default;
color:#fff;
}
#inner ul .noNext{
cursor:default;
}
#inner ul .noNext:hover{
border:1px solid #f9f9f9;
color:#000;
}
#inner ul .noNext a{
cursor:default;
}
</style>
<body>
<!--头部-->
<div style="margin-left:100px;margin-top:100px;" id="text"></div>
</body>
</html>
<script type="text/javascript">
var fenye ={
    //按钮响应时的下一个页面
    Current:1,
    //li数
    LisLen:0,
    //页数
    acount:0,
    init:function(amount,data,id,num,fn){//分别为总数 每页个数 插入到某处的ID 显示第几页 按钮响应函数
    num = Number(num);
    this.fn = fn;
    //创建DOM
    this.acount = parseInt((amount%data)==0?(amount/data):(amount/data+1));
    this.LisLen = (this.acount > 9) ? 9 :this.acount ;
    this.lastPage = (num > this.acount) ? this.acount :((num < 1 )?1:num);
    var $div = $("<div id='inner'></div>");
    var $ul = $("<ul class='items'></ul>");
    $div.append($ul);
    var $pre = "<li class='item pre'><a href='#'><span><<上一页</span></a></li>";
    var $next = "<li class='item next'><a href='#'><span>下一页>></span></a></li>";
    var $text="";
    for(var i =0;i<this.LisLen;i++){
        $text += "<li class='item page'><a href='#'><span></span></a></li>" ;
    }
    $ul.append($pre).append($text).append($next);
    $id = $("#"+id);
    $id.append($div);
    this.pageLis = $div.find(".items .page");
    this.change(this.lastPage);
    this.control();
},
    eventDefault:function(event){
       event.preventDefault();
       return false;
    },
    //判断是否为首尾页 从而禁止前一页和下一页的点击事件
    isLast:function(){
        var $current = $(".current a span").html();
        //最后一页
        if($current == this.acount)
        {
            $(".items .next").addClass('noNext');
            $(".items .next").on('click', 'a', this.eventDefault);
        }else{
            $(".items .next").removeClass('noNext');
            $(".items .next").off('click', 'a', this.eventDefault);
        }
        //第一页
        if($current == 1)
        {
            $(".items .pre").addClass('noNext');
            $(".items .pre").on('click', 'a', this.eventDefault);
        }else{
            $(".items .pre").removeClass('noNext');
            $(".items .pre").off('click', 'a', this.eventDefault);
        }
    },
    //
    change:function(pageNum){
        pageNum = Number(pageNum);
        //渲染到第几个li
        var index = 0;
        //去除样式
        $('#inner .items .current').removeClass('current');
        $('#inner .items .not').removeClass('not');
        $('#inner .items .hide').removeClass('hide');
        //若小于四 则按顺序创建页数1,2,3等
        if(pageNum<=4){
            //console.log(this.pageLis.eq(this.Current))
            for(var i=0;i<pageNum;i++){
            if(i+1==pageNum){
                this.pageLis.eq(i).addClass('current');
            }
            this.pageLis.eq(i).find("a span").html(i+1);
            index = i+1;
        }
        //否则 先创建1,2,再创建... 再创建当前页数
        }else{
            for(var i=0;i<2;i++){
                this.pageLis.eq(i).find("a span").html(i+1);
            }
            this.pageLis.eq(2).addClass('not').find("a span").html("...");
            this.pageLis.eq(3).addClass('current').find("a span").html(pageNum);
            index = 4;
        }

        //若+2大于总页数 则按顺序显示至总页数
        if(pageNum+2>=this.acount){
            for(var i=pageNum,j=0;i<this.acount;i++){
                this.pageLis.eq(index++).find("a span").html(pageNum+j+1);
                j++;
            };
        }else{
        //否则 先创建后面两页 再创建...
            for(var i=0;i<2;i++){
                this.pageLis.eq(index++).find("a span").html(pageNum+i+1);
            }
            if(pageNum+3!==this.acount)
                this.pageLis.eq(index++).addClass('not').find("a span").html("...");
            //再根据页数创建最后两页或一页
            if(this.acount-pageNum>4){
                this.pageLis.eq(index++).find("a span").html(this.acount-1);
                this.pageLis.eq(index++).find("a span").html(this.acount);
        }else{
                this.pageLis.eq(index++).find("a span").html(this.acount);
        }
        }
        for(var length =this.pageLis.length;index<length;index++){
               this.pageLis.eq(index).addClass('hide');
        }
        this.isLast();
    },
    //响应按钮点击事件
    control:function(){
        var that = this;
        $("body").on('click', '#inner .item a', function(event) {
            event.preventDefault();
            that.Current = 1;
            that.lastPage = Number($('#inner .items .current').find('a span').html());
            if($(this).parent().hasClass('next')){
                that.Current = that.lastPage+1;
            }
            else if($(this).parent().hasClass('pre')){
                that.Current = that.lastPage-1;
            }
            else
            that.Current = $(this).find('span').eq(0).html();
            that.fn(that.Current);
            that.change(that.Current);
        });
    }
}
//测试用例
fenye.init(2,2,"text",9,abc);

function abc(x){
console.log(x)
}
;
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • backbond Model方法(set)

    backbond的Model,其中存在一些操作属性的方法,而在这些方法中,最重要的就是set方法,其余的方法大部分都基于这个方法实现的,在backbond开发版...

    菜的黑人牙膏
  • Webpack系列-第三篇流程杂记

    本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节, 如有错误, 请轻喷~

    菜的黑人牙膏
  • backbond Model实现

    backbond中的M,指的是模型,即存放数据以及数据相关逻辑的单位。在分析其结构之前,先看一下其调用过程。

    菜的黑人牙膏
  • 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    白玉无冰
  • RocketMQ 同步复制 SLAVE_NOT_AVAILABLE 异常源码分析

    最近在 RocketMQ 钉钉官方群中看到有人反馈说 broker 主从部署,在发布消息的时候会报 SLAVE_NOT_AVAILABLE 异常,报这个异常的前...

    张乘辉
  • [Cocos Creator] 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    陈皮皮
  • inputSuggest邮箱提示自动补全js插件

    deepcc
  • TRTC学习之旅(三)-- 使用vue+ts集成互动直播

    上次我们已经用vue+ts实现了多人会议室的搭建,这次我们继续在上次项目的基础上,实现互动直播功能。

    黑眼圈云豆
  • 冬天到了,分享两款雪花特效代码

    小小鱼儿小小林
  • ActiveMQ源码分析——生产消息

    创建Session时,第一个传入是否开启事务,第二个传入session提交消费消息的方式 接下来看源码处理,生产者id对象由当前sessionID加上使用内部s...

    歪歪梯

扫码关注云+社区

领取腾讯云代金券