排行榜思路

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);
    }
};
// $.ajax({
//     url: "./js/pagination.json",
//     data: {name: 'jenny'},
//     type: "POST",
//     //dataType: "json",
//     success: function(data) {
//         // data = eval("(" + data+ ")");
//         data = jQuery.parseJSON(data);  // dataType注释了，故注意反序列化
//         $("#ret").text(data.result);
//     }
// });


// 展示数据函数
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_span = $('.pages_span');
    pages = document.getElementsByClassName('pages')[0];
    // pages = $('.pages')[0];
    // console.log(pages);
    table_body = document.getElementsByClassName('table-body')[0];
    // table_body = $('.table-body')[0];
    total = data.length; // 总条目数
    document.getElementsByClassName('total_count')[0].innerHTML = total;
    // $('.total_count').html(total);
    total_page = Math.ceil(total / num); // 总页数
    // 遍历数据，生成HTML代码
    document.getElementsByClassName('page_count')[0].innerHTML = 1;
    // $('.page_count').html(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>';
            // pages.html('<span class="pages_span" value="' + p + '" onclick="changePage(this)">' + p + '</span>');
        }
    // 当p大于5的时候，将下标为0的元素变为省略号，然后重新渲染下标
    // // 然后当点击右箭头的时候，将当前页码加1，然后重新渲染数据
    table_body.innerHTML = str;
    // table_body.html(str);
    pages_span[0].style.backgroundColor = 'blue';
    // eq可以判断是第几个元素
    // $('.pages_span').eq(0).css('background-color', 'blue');
    // 添加左箭头和右箭头
    pages.innerHTML += '<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>';
    // pages.html('<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>');
    right_arrow = document.getElementsByClassName('right')[0];
    // right_arrow = $('right_arrow').eq(0);
    left_arrow = document.getElementsByClassName('left')[0];
    // left_arrow = $('left').eq(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;
        // table_body.html(str);
        pages_span[k].style.backgroundColor = 'blue';
        // pages_span.eq(k).css('background-color', 'blue');
        pages_span[k - 1].style.backgroundColor = 'white';
        // pages_span.eq(k - 1).css('background-color', '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.eq(k).css('background-color', 'blue');
        pages_span[k + 1].style.backgroundColor = 'white';
        // pages_span.eq(k + 1).css('background-color', 'white');
        console.log(k);
    }
}
function changePage(obj) {
    let page = obj.getAttribute('value');
    document.getElementsByClassName('page_count')[0].innerHTML = obj.getAttribute('value');
    // $('.page_count').eq(0).html(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;
    // table_body.html(str);
    for (let i = 0; i < pages_span.length; i++) {
        pages_span[i].style.backgroundColor = 'white';
        // pages_span.eq(i).css('background-color', 'white');
    }
    obj.style.backgroundColor = 'blue';
    // obj.css('background-color', 'blue');
}
let input_page = document.getElementsByClassName('input_page')[0];
// let input_page = $('input_page').eq(0);
input_page.onkeydown = function (e) {
    if (e.keyCode == 13) {
        // 禁用键盘上的小圆点
        let page = input_page.value;
        document.getElementsByClassName('page_count')[0].innerHTML = 1;
        // $('.page_count').eq(0).html(1);
        if (page > total_page || page < 1 || isNaN(page)) {
            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;
            // table_body.html(str);
            for (let i = 0; i < pages_span.length; i++) {
                pages_span[i].style.backgroundColor = 'white';
                // pages_span.eq(i).css('background-color', 'white');
            }
            pages_span[k].style.backgroundColor = 'blue';
            // pages_span.eq(k).css('background-color', 'blue');
        }
    }
}
//先获取到option的value值，然后根据点击选择的value值，将值赋给num，然后将数据渲染到页面上
let select = document.getElementById('select-page');
// let select = $('#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>';
        // pages.html('<span class="pages_span" value="' + p + '" onclick="changePage(this)">' + p + '</span>');
    }
    document.getElementsByClassName('page_count')[0].innerHTML = 1;
    // $('.page_count').eq(0).html(1);
    pages.innerHTML += '<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>';
    // pages.html('<span class="left" onclick="left()">&#8249;</span><span class="right" onclick="right()">&#8250;</span>');
    table_body.innerHTML = str;
    // table_body.html(str);
}

假数据里面是数组包对象，而且名字和排行的数字不能相同
    先将数据请求过来，然后声明一个名为str的空字符串变量，用于将假数据渲染到页面上
    点击排行
        首先命名i的值为1的变量，在函数里面判断，当i == 1的时候说明是第一次点击，需要升序，然后将i的值赋为2，else说明是第二次点击，需要降序，然后将值设为1
            调用渲染函数，将排序好的数据渲染上去
    模糊搜索
        首先获取input框，然后给input添加一个监听事件，先获取到用户输入里面的值，声明一个变量命名为arr的空数组，for循环遍历data的所有数据，用于筛选出包含input框的值
            判断data里面的数据是否包含input框的值，如果有就添加到新数组里面，如果没有就显示暂无数据，然后刷新页面，也就是调用一下渲染函数