分页制作思路

    首先获取json里面的假数据，然后定义每页显示的条目码，以及页码的初始值为整条数据长度除以条目码
    渲染页面上每页的长度是五条所以这里设置一个k的初始值为0
        然后for循环i等于k * num（条目码），范围为（k + 1）* num然后字符串拼接
            要进行判断，当i大于等于整条数据的长度的时候break停止函数
    页码的渲染，页码这里是要进行计算的，不过在上面的时候我就已经计算好了，并赋值给了一个变量
        所以在这里就直接for循环，遍历里面所有的值，然后条件为小于等于，一定要添加等于，如果数据除以条目码会有余数，如果不添加的话，就不会出现最后几条数据
    添加左箭头和右箭头，我这里是将左箭头和右箭头添加到一起了，并没有一个在左边一个在右边
        给左箭头和右箭头添加点击事件
            右箭头，右箭头的点击事件就是将数据向后面挪动一页，也就是将k的值加一，然后调用渲染函数就OK了，要判断k等于最后一页的时候要提示用户这位最后一个，然后调用左箭头
            左箭头，其实和右箭头是相反的，向左挪动一个呗，就是让k的值减一，然后判断为第一页的时候提示用户为第一个，然后调用渲染函数
    input框，这里面用的是键盘的点击事件，enter键，键盘码为13
        首先要先获取input框，然后给input添加一个键盘事件，然后进行判断e.keycode是否等于13，，然后在获取输入框里面的值，用判断输入的是第几页
            如果输入进去的值大于条形码的页数或者小于1的时候，弹窗提示用户，请输入正确的页码，否则把输入进去的值减一赋给k然后清空字符串，调用渲染函数就OK了
    下拉框选择每页的条目码为多少，这里面很简单的，无非就是将重新赋一下，然后调用渲染函数
        首先先获取到每个option框里面的值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上，绑定一个onchange事件，然后在函数里面切记先将str的值和里面的页码的值也要清空，然后获取选中项的索引，然后将值赋给num
            然后计算页码，因为num重新赋值了，所以要计算，然后调用一下渲染函数，将点击过后新的值渲染到页面上
    页码的省略号的制作，首先先将第一页和最后一页的设置一个变量，以及省略号也定义一个变量，方便后面的使用
        然后用if判断，我这里判断的时候总页数小于等于10的时候将页码全部显示出来，，然后接着else if判断，当总页数大于10的时候且当前页数远离总页数的时候，for循环渲染i的整条数据
            然后接着判断当总页数大于10且接近总页数的时候，也就是for循环里面判断当k的值大于整条数据长度 - 7的时候，然后将第一页和最后的省略号字符串拼接中间用i循环将页码渲染
                除开刚刚说的哪两种情况，当页面在中间的时候，我写的是将中间的那页码显示出来，然后将第一页和尾页显示出来，尾页前面用省略号以及第一页的后面也要用省略号
                    前面写的是添加颜色写在了function里面，但是在这种情况下已经不适用了，所以我就添加到里面，用的三元判断去更改颜色

代码里面都是有注释的

let xhr = new XMLHttpRequest();
let data;
// 设置请求方式和请求地址
xhr.open('get', './js/pagination.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let text = xhr.responseText;
        // 将获取的文本数据转换为JSON格式
        data = JSON.parse(text);
        // console.log(data);
        // 调用展示数据的函数
        pagination(data);
    }
};
// 展示数据函数
let str = '';
let num = 5; // 每页显示的条目数
let page = 1; // 当前页码
let k = 0; // 记录当前页码的开始索引1
let total;
let total_page;
let pages;
let pages_span;
let table_body;
let right_arrow;
let left_arrow;
let tre = ``;
let p = 0;
// 渲染分页元素
function pagination(data) {
    pages_span = document.getElementsByClassName('pages_span');
    pages = document.getElementsByClassName('pages')[0];
    // console.log(pages);
    table_body = document.getElementsByClassName('table-body')[0];
    total = data.length; // 总条目数
    document.getElementsByClassName('total_count')[0].innerHTML = total;
    total_page = Math.ceil(total / num); // 总页数
    // 遍历数据，生成HTML代码
    document.getElementsByClassName('page_count')[0].innerHTML = 1;
    for (let i = k * num; i < (k + 1) * num; i++) {
        str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
        if (i >= total) {
            break;
        }
    }
        for(let p = 1; p <= total_page; p++) {
            pages.innerHTML += '<span class="pages_span" value="' + p + '" onclick="changePage(this)">' + p + '</span>';
        }
    // 当p大于5的时候，将下标为0的元素变为省略号，然后重新渲染下标
    // // 然后当点击右箭头的时候，将当前页码加1，然后重新渲染数据
    table_body.innerHTML = str;
    pages_span[0].style.backgroundColor = 'blue';
    // 添加左箭头和右箭头
    pages.innerHTML += '<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>';
    right_arrow = document.getElementsByClassName('right')[0];
    left_arrow = document.getElementsByClassName('left')[0];
}
function right() {
    console.log(total_page);
    str = '';
    k = k + 1;
    if (k == total_page) {
        // alert('已经是最后一页了');
        // 禁用右箭头
        right_arrow.onclick = null;
        left_arrow.onclick = left;
    } else {
        left_arrow.onclick = left;
        // 解除右箭头
        right_arrow.onclick = right;
        for (let i = k * num; i < (k + 1) * num; i++) {
            // 判断是否为最后一页
            if (i >= total) {
                break;
            }
            str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
        }
        table_body.innerHTML = str;
        pages_span[k].style.backgroundColor = 'blue';
        pages_span[k - 1].style.backgroundColor = 'white';
        console.log(k);
    }
}
function left() {
    str = '';
    k--;
    if (k < 0) {
        left_arrow.onclick = null;
        right_arrow.onclick = right;
        console.log(k);
        // 禁用左箭头
    } else {
        right_arrow.onclick = right;
        // 解除左箭头
        left_arrow.onclick = left;
        for (let i = k * num; i < (k + 1) * num; i++) {
            // 判断是否是最后一页
            if (i >= total) {
                break;
            }
            str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
        }
        table_body.innerHTML = str;
        pages_span[k].style.backgroundColor = 'blue';
        pages_span[k + 1].style.backgroundColor = 'white';
        console.log(k);
    }
}
function changePage(obj) {
    let page = obj.getAttribute('value');
    document.getElementsByClassName('page_count')[0].innerHTML = obj.getAttribute('value');
    console.log(page);
    str = '';
    k = page - 1;
    for (let i = k * num; i < (k + 1) * num; i++) {
        // 判断是否为最后一页
        if (i >= total) {
            break;
        }
        str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
    }
    table_body.innerHTML = str;
    for (let i = 0; i < pages_span.length; i++) {
        pages_span[i].style.backgroundColor = 'white';
    }
    obj.style.backgroundColor = 'blue';
}
let input_page = document.getElementsByClassName('input_page')[0];
input_page.onkeydown = function (e) {
    if (e.keyCode == 13) {
        // 禁用键盘上的小圆点
        let page = input_page.value;
        document.getElementsByClassName('page_count')[0].innerHTML = 1;
        if (page > total_page || page < 1) {
            alert('请输入正确的页码');
        } else {
            str = '';
            // 将k四舍五入到最接近的整数
            k = Math.round(page - 1);
            for (let i = k * num; i < (k + 1) * num; i++) {
                str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
            }
            table_body.innerHTML = str;
            for (let i = 0; i < pages_span.length; i++) {
                pages_span[i].style.backgroundColor = 'white';
            }
            pages_span[k].style.backgroundColor = 'blue';
        }
    }
}
//先获取到option的value值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上
let select = document.getElementById('select-page');
select.onchange = function () {
    str = '';
    pages.innerHTML = '';
    k = 0;
    console.log(data[0].name);
    let indexs = select.selectedIndex;  //选中项的索引
    num = select.options[indexs].value;
    console.log(num);
    total_page = Math.ceil(total / num);
    console.log(total_page);
    // console.log(k);
    // 遍历数据，生成HTML代码
    for (let i = k * num; i < (k + 1) * num; i++) {
        str += '<tr><td>' + (i + 1) + '</td><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].motto + '</td></tr>';
        if (i >= total) {
            break;
        }
    }
    for(let p = 1; p <= total_page; p++) {
        pages.innerHTML += '<span class="pages_span" value="' + p + '" onclick="changePage(this)">' + p + '</span>';
    }
    document.getElementsByClassName('page_count')[0].innerHTML = 1;
    pages.innerHTML += '<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>';
    table_body.innerHTML = str;
    // pages_span[0].style.backgroundColor = 'blue';
}