原生 js 实现分页 & 过滤

布局

    <input type="text" placeholder="请输入搜索关键字">
    <!-- 显示搜索结果 -->
    <ul class="search-list"></ul>

js

// 定义搜索数据源
const SOURCE = [
    {
        name: "托儿索",
        age: 28
    },
    {
        name: "提款姬",
        age: 26
    },
    {
        name: "儿童劫",
        age: 28
    },
    {
        name: "娃娃鱼",
        age: 25
    },
    {
        name: "鱼尾雯",
        age: 25
    },
    {
        name: "红领烬",
        age: 28
    },
    {
        name: "橡皮妮",
        age: 12
    },
    {
        name: "喜之螂",
        age: 28
    }
];

// 1. 获取元素
let _input = document.querySelector("input");
let _list = document.querySelector(".search-list");
// 2. 实时搜索

_input.oninput = function () {
    // 获取搜索关键字
    let keywords = this.value;
    // ajax => 搜索逻辑在后台处理
    let reg = new RegExp(keywords, "i");
    // 获取搜索结果
    let searchRes = SOURCE.filter(obj => {
        return reg.test(JSON.stringify(obj));
    });
    // 显示结果
    let htmlStr = "";
    searchRes.forEach(obj => {
        htmlStr += `<li>${obj.name} - ${obj.age}</li>`;
    });
    _list.innerHTML = htmlStr;

}

// 分页
let datas = [];
for(let i = 0; i < 36; i++) {
    datas.push(`英雄-${i}`);
}

let size  = 10;
let pages = Math.ceil(datas.length / size);
function getPageDatas(page) {
    // 获取下标
    let starIndex = (page - 1) * size;
    let endIndex  = page * size;
    return page === pages ? datas.slice(starIndex) : datas.slice(starIndex, endIndex);
}
console.log(getPageDatas(1));
console.log(getPageDatas(2));
console.log(getPageDatas(3));
console.log(getPageDatas(4));
    
// 首页 上一页 1 2 3 4 下一页 尾页