1.分页组件

分页组件

结果图：

结构html代码

    <!-- 分页组件存放的最外层容器 -->
    <div class="pagerContainer"></div>

    <script src="../js/pager.js"></script>
    <script>
        // 获取分页放置的外部容器
        var pagerContainer = document.getElementsByClassName('pagerContainer')[0];

        // 调用创造分页组件的函数，在pager.js文件中，上面已经引入了
        // 当前页 总页数 中间的渲染页数 放入的容器
        createPager(2,50,10,pagerContainer);
    </script>

样式css代码

/* 生成的分页组件容器的样式；水平居中显示 */
.pager{
    text-align:center;
}

/* 分页组件里面存放的a的样式 */
.pager a{
    /* 要设置他的高，因为a是行级元素，不可以改宽高，然后又要确保在一行，由内容决定元素大小，所以改为行级块元素 */
    display:inline-block;
    height:34px;

    /* 设置字体垂直居中，行高等于高度 */
    line-height:34px;

    /* 垂直居中后字体的上下有间距，使用padding使字体离a两边有间距 */
    padding:0 12px;

    /* 设置边框和字体颜色 */
    border: 1px solid #e1e2e3;
    color: #001ac4;

    /* 让a两边隔开一段距离，使用外边距 */
    margin:8px;

    /* 设置鼠标移入样式为小手 */
    cursor: pointer;

    /* 设置用户不可选择 */
    user-select: none;
}

/* 设置a的激活样式；即当前页挂上该样式 */
.pager a.active{
    /* 去掉外边框 */
    border: none;

    /* 改变字体颜色 */
    color: #f40;

    /* 去掉鼠标样式，改为默认 */
    cursor: none;

}


/* 设置a的不能点击的样式；即禁用时挂上该样式 */
.pager a.disabled{
    /* 改变字体颜色 */
    color : #ccc;

    /* 设置鼠标样式为禁用状态 */
    cursor: not-allowed;
}

js代码

/**
 * 生成分页组件的函数
 * @param {当前页} page 
 * @param {最大页数} pageNumber 
 * @param {当前中间渲染的页数} mostNumber 
 * @param {生成后放置的容器} container 
 */
function createPager(page,pageNumber,mostNumber,container){
    // 每次渲染前都把容器原有内容清空
    container.innerHTML = '';
    // 1.生成用于放置各个分页按钮，即a的容器，挂上pager类;
    var pager = document.createElement('div');
    pager.className = 'pager';

    // 辅助函数（创建a的函数）并给其加上点击事件
    function createA(className,text,jump){
        var a = document.createElement('a');
        a.className = className;
        a.innerText = text;
        // 将生成a加入到提前生成的pager容器里
        pager.appendChild(a);

        // 为a添加点击事件
        a.onclick = function(){
            // 有几种情况下是不跳转的：（1）当点击的正是当前页；（2）当要跳转的jump<1或者>pageNumber时
            if(jump < 1 || jump > pageNumber || page === jump ||){
                return;
            }
            // 重新调用createPager函数，重新渲染分页组件，只需要把page当前页换成jump跳转页即可，其他参数不变
            createPager(jump,pageNumber,mostNumber,container);
        }
    }





    // 2.生成分页 包含四部分；鉴于下面均是来生成a标签的，所以封装了创建a标签的函数
    //  (1)首页和上一页 
    // 要判断，若page=1：则要给他们挂上禁用的样式；若不等于：则默认样式
    if(page === 1){
        // 参数：要挂的类名，文字，点击后跳转的页数：重新调用createPager渲染分页组件;
        // 有了跳转的页数，相当于以跳转页数为当前页，其他createPager参数不变，重新渲染分页组件
        // 因为这里是禁用，所以最后一个参数添多少都可以
        createA('disabled','首页',1);
        createA('disabled','上一页',1);
    }else{
        // 首页应该是跳转到第一页
        createA('','首页',1);
        // 上一页应该是跳转到当前页-1页
        createA('','上一页',page - 1);
    }

    // （2）中间渲染的页
    // 中间页要确定最小页和最大页
    // 最大程度确保当前页在中间显示
    // 最小页应该是：当前页-渲染中间页数/2；结果是整数；即Math.floor(page - mostNumber/2)
    // 最大页就是：上一步计算出来的最小页+渲染中间页数-1;即min + mostNumber - 1;
    // 但前面要加判断，若计算出来的min<1;那就应该让他等于1；
    // 若计算出来的max大于pageNumber；即总页数；那就让他等于pageNumber
    var min = Math.floor(page - mostNumber/2);
    if(min < 1){
        min = 1;
    }
    var max = min + mostNumber - 1;
    if(max > pageNumber){
        max = pageNumber;
    }
    // 使用循环，生成从min到max的a；
    for(var i = min;i <= max;i ++){
        // 还要加判断，若i = page；即若为当前页，则要加上激活样式
        // 最后的参数点击该a,跳转的页数也是i
        if(page === i){
            createA('active',i,i);
        }else{
            createA('',i,i);
        }
    }
    // （3）下一页和尾页
    // 同首页和下一页
    if(page === pageNumber){
        createA('disabled','下一页',1);
        createA('disabled','尾页',1);
    }else{
        // 下一页应该是跳转到当前页+1页
        createA('','下一页',page + 1);
        // 尾页应该是跳转到pageNumber页
        createA('','尾页',pageNumber);
    }
    // （4）最后的span：当前页/总页数
    var span = document.createElement('span');
    span.innerText = page + '/' + pageNumber;
    pager.appendChild(span);


    container.appendChild(pager);
}