分页渲染

案例 分页渲染 * { margin: 0; padding: 0; }

    .header,
    .footer {
        width: 1200px;
        margin: 0 auto;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        height: 120px;
        color: #fff;
    }

    .footer {
        height: 300px;
    }

    ul,
    li {
        list-style: none;
    }

    ul {
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 10px;
    }

    li {
        width: 290px;
        border: 1px solid #333;
        margin-bottom: 10px;
        padding: 5px;
        box-sizing: border-box;
    }

    li>img {
        width: 278px;
        display: block;
    }

    .pagination {
        width: 1200px;
        margin: 10px auto;
        height: 50px;
        display: flex;
        align-items: center;
    }

    .pagination>.prev,
    .pagination>.next {
        width: 50px;
        height: 30px;
        cursor: pointer;
        background-color: orange;
        font-size: 24px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pagination>.disable {
        cursor: not-allowed;
        background-color: #ccc;
    }

    .pagination>.total {
        font-size: 30px;
        font-weight: 700;
        margin: 0 20px;
    }

    .pagination>select {
        font-size: 22px;
        padding-left: 20px;
        margin-left: 30px;
    }
</style>

<div class="pagination">
    <span class="prev class = disable">&lt;</span>
    <span class="total">1 / 100</span>
    <span class="next class = disable">&gt;</span>
    <select>
        <option value="4">4</option>
        <option value="8">8</option>
        <option value="12">12</option>
        <option value="16">16</option>
    </select>
</div>

<ul>

</ul>
<div class="footer">底部导航</div>
<script src="./dm_list.js"></script>
<script>
    //获取元素
    console.log(list);
    var oul = document.querySelector('ul')//获取ul
    var prev = document.querySelector('.prev')//获取上一页按钮
    var next = document.querySelector('.next')//获取下一页按钮
    var select = document.querySelector('select')//获取下拉列表
    var total = document.querySelector('.total')//获取下拉列表
    //定义一个变量表示当前页
    var currentNum = 1//表示当前页默认是第一页 
    //定义一个变量表示一页显示多少条
    var pagesize = 4//表示一页显示4条数据
    var totalNum = 0//表示总页数
    //首先准备一个渲染函数
    function my1() {
        //首先用数组的部分展示出来利用silce方法
        var newList = list.slice((currentNum - 1) * pagesize, (currentNum * pagesize))
        console.log(newList);
        //进行渲染
        oul.innerHTML = newList.reduce(function (prev, item) {
            return prev + `
                <li>
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>.
                    <p>城市: ${item.city}</p>
                    <p>地址: ${item.address}</p>
                    <p>价格: ${item.price}</p>
                    <p>时间: ${item.showTime}</p>
                </li>
                `
        }, '')
        //本来应该减去1 由于silce包前不包后 要加1
        //改变页码
        totalNum = Math.ceil(list.length / pagesize)
        total.innerHTML = `${currentNum} / ${totalNum}`
        console.log(currentNum);//1
        console.log(totalNum);//7
        console.log(totalNum.innerHTML);//undefiend
        //修改按钮 点击上一页
        if (currentNum === 1) {
            prev.classList.add('disable')
        } else {
            prev.classList.remove('disable')
        }
        //修改按钮 点击下一页
        if (currentNum === totalNum) {
            next.classList.add('disable')
        } else {
            next.classList.remove('disable')
        }
    }
    //页面一打开调用一次函数
    my1()
    //给上一页添加点击事件
    prev.onclick = function () {
        console.log('点击事件执行了');
        if (currentNum === 1) {//代码执行到这里说明当前页是第一页
            return
        }
        currentNum--
        my1()
    }
    next.onclick = function () {
        console.log('点击事件执行了');
        if (currentNum === totalNum) {//代码执行到这里说明当前页是最后一页
            return
        }
        currentNum++
        my1()
    }
    //给下拉框添加点击事件
    select.onchange = function name(params) {
        pagesize = select.value
        my1()
    }