JS分页功能

HTML：

<div class="tip"></div>

        <div class="tab">
            <table border="1" cellpadding="10" cellspacing="0" style="text-align: center;">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>地址</th>
                    </tr>
                </thead>
                <tbody class="list">
            
                </tbody>
            </table>
        </div>
        
        <div class="box"></div>
        <div class="boxData">
            <select name="" id="" class="selects">
                <option value="5">每页5条数据</option>
                <option value="10">每页10条数据</option>
                <option value="15">每页15条数据</option>
                <option value="20">每页20条数据</option>
                <option value="25">每页25条数据</option>
            </select>
        </div>

CSS：

* {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.tip {
    width: 150px;
    height: 50px;
    position: fixed;
    border-radius: 25px;
    display: none;
    line-height: 50px;
    text-align: center;
}

th {
    width: 250px;
    height: 25px;
}
.tab{
    width: 90%;
    margin-left: 5%;
    height: 600px;
    overflow-y: scroll;
    
}
table {    
    width: 80%;
    margin-left: 150px;
    margin-top: 50px;
    
}

.box {
    margin-left: 150px;
    margin-top: 20px;
    position: fixed;
}
.boxData{
    margin-left: 150px;
    margin-top: 50px;
}

td {
    height: 50px;
}

.back,.next {
    width: 55px;
    height: 25px;
    border-radius: 5px;
    border: 0;
}
.num{
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 0;
    
}
.first,.last{
    width: 35px;
    height: 25px;
    border-radius: 5px;
    border: 0;
}
input{
    width: 25px;
}
.target{
    width: 35px;
    height: 25px;
    border-radius: 5px;
    border: 0;
}
button:hover{
    background-color: lightgray;
}
button{
    margin-left: 3px;
}
.inner{
    display: inline-block;
    width: 17px;
    text-align: center;
}

JS：

        let text;
        let data;
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'js/5.8.json', true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                text = xhr.responseText;
                datad = JSON.parse(text);
                data = datad
                console.log(data);
                vray(data);
            }
        };

        let k = 0;
        let num = 5;
        let countPage

        function vray(data) {
            console.log(data);
            countPage = data.length / num;
            let str = '';
            let strBox = '';
            for (let i = k * num; i < (k + 1) * num; i++) {
                if(data[i] == undefined){
                    break;
                }
                str += `<tr>
                            <td>${i+1}</td>
                            <td>${data[i].name}</td>
                            <td>${data[i].sex}</td>
                            <td>${data[i].age}</td>
                            <td>${data[i].tel}</td>
                            <td>${data[i].local}</td>
                        </tr>`;

            }
            document.getElementsByClassName('list')[0].innerHTML = str;
            strBox += `总共<div class="inner">${data.length}</div>条数据，当前是第<div class="inner">${k+1}</div>页 显示第<div class="inner">${k*num +1}</div>条到第<div class="inner">${(k+1)*num}</div>条数据
                    
                <button οnclick="first()" class="first">首页</button><button οnclick="back()" class="back">上一页</button>`;
            for (let i = 0; i < countPage; i++) {
                strBox += `<button οnclick="target(${i})" ${k==i?'style="background-color:gray"':''} class="num">${i+1}</button>`;
            }
            strBox += `<button οnclick="next()" class="next">下一页</button><button οnclick="last()" class="last">尾页</button>
            前往<input class="page"/>页 <button οnclick="tar()" class="target">跳转</button>`;
            document.getElementsByClassName('box')[0].innerHTML = strBox;
        }

        function first() {
            k = 0;
            vray(data)
        }

        function last() {
            k = countPage - 1;
            vray(data);
        }
        function target(i){
            k = i;
            vray(data);
        }
        //上一页
        function back() {
            if (k > 0) {
                k--;
                vray(data);
            } else {
                $('.tip').show()
                document.getElementsByClassName('tip')[0].innerHTML = `再往前就没有了哟~`;
                setTimeout(function() {
                    $('.tip').hide()
                }, 1500)

            }
        }
        //下一页
        function next() {
            if (k < countPage -1) {
                k++;
                vray(data);
            } else {
                $('.tip').show()
                document.getElementsByClassName('tip')[0].innerHTML = `再往后就没有了哟~`;
                setTimeout(function() {
                    $('.tip').hide()
                }, 1500)

            }
        }
        //跳转
        function tar() {
            let num = document.getElementsByClassName('page')[0].value;
            if (num == '') {
                $('.tip').show()
                document.getElementsByClassName('tip')[0].innerHTML = `页码不能为空哦~`;
                setTimeout(function() {
                    $('.tip').hide()
                }, 1500)
            } else if (num > countPage) {
                $('.tip').show()
                document.getElementsByClassName('tip')[0].innerHTML = `没有这个页码呢~`;
                setTimeout(function() {
                    $('.tip').hide()
                }, 1500)
            } else if (num <= 0 || num % 1 != 0) {
                $('.tip').show()
                document.getElementsByClassName('tip')[0].innerHTML = `页码数不对哦~`;
                setTimeout(function() {
                    $('.tip').hide()
                }, 1500)
            } else {
                k = num - 1;
            }
            vray(data);
        }
        let selects = document.getElementsByClassName('selects')[0];
        console.log(selects);
        selects.addEventListener("change", function() {
            //重新赋值
            num = this.value;
            // 获取现在有的页码
            countPage = Math.ceil(data.length / num);
            console.log(countPage);
            // 判断k是否大于总页码
            if (k > countPage - 1) {
                k = countPage - 1;
            };
            vray(data);
        });

浅浅记录一下。