分页制作

HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0 ; 
        padding: 0;
        list-style-type: none;
    }
    .pagWarp{
        height: 40px;
        box-shadow: 0 2px 5px #b6b6b6;
        position: absolute;
        border-radius: 2px;
        right: 42%;
        top: 430px;
    }
    #btnL,#btnR{
        line-height: 40px;
        cursor: pointer;
    }
    #btnL{
        float: left;
    }
    #btnR{
        float: right;             
    }
    .pagWarp ul{        
        height: 40px;
        margin: 0 auto;
        float: left;
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
    }
    .pagWarp ul li{
        float: left;
        text-align: center;
        line-height: 40px;
        padding: 0 4px;
    }
    .active{
        color: blue;
        font-size: 30px;
    }

    /* 商品列表样式 */
.list{
     80%;
    margin: 20px auto;
}
.list:after{
    content:'';
    display: block;
    clear: both;
}
.list li{
    padding:2%;
     15%;
    float: left;
    height: 300px;
    color: #666;
    border-right: 1px solid #b6b6b6;
      box-shadow: 2px 2px 5px #b6b6b6;  
      margin-left: 8px;
      margin-top: 20px;
}
.list li h2{
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}
.list .img{
     100%;
    border: 1px solid #b6b6b6;
    height: 180px;
}
.list input[type=button]{
    display: block;
    margin: 0 auto;
    border: 1px solid #b6b6b6;
     100px;
    height: 80px;
}
</style>
<body>
    <ul class="list" id="list">
       
    </ul>
    <div class="pagWarp" id="pageWarp">
        <li id="btnL">上一页</li>
        <ul>
        </ul>
        <li id="btnR">下一页</li>
    </div>
</body>
<script src="ajax.js"></script>
<script src="index.js"></script>
</html>

index.js

; (function(){
    "use strict";
    class Page{
        constructor(){
                this.url="http://localhost/1908/page/goods.json",
                this.cont=document.getElementById('list'),
                this.pageCont=document.querySelector('#pageWarp ul'),
                this.left=document.getElementById("btnL"),
                this.right=document.getElementById("btnR"),
                this.num=5,
                this.index=0
             // 1.开启ajax，请求数据
             this.load();
             // 4.绑定点击事件
             this.addEvent();
        }
        addEvent(){
            var that = this;
            // 5.事件被触发时，改变索引（页码）
            this.left.onclick = function(){
                that.changeIndex(-1)
            }
            this.right.onclick = function(){
                that.changeIndex(1)
            }
        }
        changeIndex(type){
            // 计算页码
            if(type == -1){
                if(this.index == 0){
                    this.index = this.maxNum-1;
                }else{
                    this.index--;
                }
            }else{
                if(this.index == this.maxNum-1){
                    this.index = 0;
                }else{
                    this.index++;
                }
            }
            // 渲染样式
            this.active();
            // 6.修改页面数据
            this.display();
        }
        load(){
            ajax({
                url:this.url,
                success:res=>{
                    // 2.请求数据成功，解析数据，准备渲染页面
                    this.res = JSON.parse(res);
                    // 3.创建页码
                    this.createPage();
                    this.display();
                }
            })
        }
        createPage(){
            // 计算最大页码数
            this.maxNum = Math.ceil(this.res.length / this.num)
            // 生成页码的结构
            var str = "";
            for(var i=0;i<this.maxNum;i++){
                str += `<li>${i+1}</li>`;
            }
            this.pageCont.innerHTML = str;
            this.active();//让默认的index有样式。
        }
        active(){
            // 设置当前项的功能
            for(var i=0;i<this.maxNum;i++){
                this.pageCont.children[i].className = "";
            }
            this.pageCont.children[this.index].className = "active";
        }
        display(){
            var str = "";
            // 分页的核心部分：
            // 一页数据有限，不能够从0到length-1了
            // 0~5     this.num5*this.index0   ~   this.num5*(this.index0+1)
            // 5~10    this.num5*this.index1   ~   this.num5*(this.index1+1)
            // 10~15   this.num5*this.index2   ~   this.num5*(this.index2+1)

            for(var i=this.num*this.index;i<this.num*(this.index+1);i++){
                if(i<this.res.length){
                    str += `<li>
                            <img src="${this.res[i].url}" alt="" class="img">        
                            <h2>商品名称:<span>${this.res[i].name}</span></h2>
                            <h2>商品介绍:<span>${this.res[i].tip}</span></h2>
                            <h2>商品价格:<span>${this.res[i].price}</span></h2>
                        </li>`;
                }
            }
            this.cont.innerHTML = str;
        }
    }

    new Page;

    // window.page = Page;
})();

另一种方法写：html(可以适应不同情况调用) .这个用了return方法

html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0 ; 
        padding: 0;
        list-style-type: none;
    }
    .pagWarp{
        height: 40px;
        box-shadow: 0 2px 5px #b6b6b6;
        position: absolute;
        border-radius: 2px;
        right: 42%;
        top: 430px;
    }
    #btnL,#btnR{
        line-height: 40px;
        cursor: pointer;
    }
    #btnL{
        float: left;
    }
    #btnR{
        float: right;             
    }
    .pagWarp ul{        
        height: 40px;
        margin: 0 auto;
        float: left;
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
    }
    .pagWarp ul li{
        float: left;
        text-align: center;
        line-height: 40px;
        padding: 0 4px;
    }
    .active{
        color: blue;
        font-size: 30px;
    }

    /* 商品列表样式 */
.list{
     80%;
    margin: 20px auto;
}
.list:after{
    content:'';
    display: block;
    clear: both;
}
.list li{
    padding:2%;
     15%;
    float: left;
    height: 300px;
    color: #666;
    border-right: 1px solid #b6b6b6;
      box-shadow: 2px 2px 5px #b6b6b6;  
      margin-left: 8px;
      margin-top: 20px;
}
.list li h2{
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}
.list .img{
     100%;
    border: 1px solid #b6b6b6;
    height: 180px;
}
.list input[type=button]{
    display: block;
    margin: 0 auto;
    border: 1px solid #b6b6b6;
     100px;
    height: 80px;
}
</style>
<body>
    <ul class="list" id="list">
       
    </ul>
    <div class="pagWarp" id="pageWarp">
        <li id="btnL">上一页</li>
        <ul>
        </ul>
        <li id="btnR">下一页</li>
    </div>
</body>
<script src="../ajax.js"></script>
<script src="index.js"></script>
<script>
    new page({
        url:"http://localhost/1908/page/goods.json",
        cont:document.getElementById('list'),
        pageCont:document.querySelector('#pageWarp ul'),
        left:document.getElementById("btnL"),
        right:document.getElementById("btnR"),
        num:5,
        index:0
    });
</script>
</html>

index.js

;var page = (function(){
    "use strict";
    class Page{
        constructor(options){
            this.url = options.url;
            this.cont = options.cont;
            this.pageCont = options.pageCont;
            this.left = options.left;
            this.right = options.right;
            this.num = options.num;
            this.index = options.index;
    
            // 1.开启ajax，请求数据
            this.load();
            // 4.绑定点击事件
            this.addEvent();
        }
        addEvent(){
            var that = this;
            // 5.事件被触发时，改变索引（页码）
            this.left.onclick = function(){
                that.changeIndex(-1)
            }
            this.right.onclick = function(){
                that.changeIndex(1)
            }
        }
        changeIndex(type){
            // 计算页码
            if(type == -1){
                if(this.index == 0){
                    this.index = this.maxNum-1;
                }else{
                    this.index--;
                }
            }else{
                if(this.index == this.maxNum-1){
                    this.index = 0;
                }else{
                    this.index++;
                }
            }
            // 渲染样式
            this.active();
            // 6.修改页面数据
            this.display();
        }
        load(){
            ajax({
                url:this.url,
                success:res=>{
                    // 2.请求数据成功，解析数据，准备渲染页面
                    this.res = JSON.parse(res);
                    // 3.创建页码
                    this.createPage();
                    this.display();
                }
            })
        }
        createPage(){
            // 计算最大页码数
            this.maxNum = Math.ceil(this.res.length / this.num)
            // 生成页码的结构
            var str = "";
            for(var i=0;i<this.maxNum;i++){
                str += `<li>${i+1}</li>`;
            }
            this.pageCont.innerHTML = str;
            // 设置默认当前项
            this.active();
        }
        active(){
            // 设置当前项的功能
            for(var i=0;i<this.pageCont.children.length;i++){
                this.pageCont.children[i].className = "";
            }
            this.pageCont.children[this.index].className = "active";
        }
        display(){
            var str = "";
            // 分页的核心部分：
            // 一页数据有限，不能够从0到length-1了
            // 0~5     this.num5*this.index0   ~   this.num5*(this.index0+1)
            // 5~10    this.num5*this.index1   ~   this.num5*(this.index1+1)
            // 10~15   this.num5*this.index2   ~   this.num5*(this.index2+1)

            for(var i=this.num*this.index;i<this.num*(this.index+1);i++){
                if(i<this.res.length){
                    str += `<li>
                            <img src="${this.res[i].url}" alt="" class="img">        
                            <h2>商品名称:<span>${this.res[i].name}</span></h2>
                            <h2>商品介绍:<span>${this.res[i].tip}</span></h2>
                            <h2>商品价格:<span>${this.res[i].price}</span></h2>
                        </li>`;
                }
            }
            this.cont.innerHTML = str;
        }
    }

    return Page;

    // window.page = Page;
})();

ajax封装代码，json代码不再写上了。知道方法就行

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hy96/p/11553348.html