分页反应猫鼬 - Javascript

本文将介绍如何使用Javascript编写一个分页反应猫鼬，该猫鼬可以根据数据量和每页显示数量自动创建分页，并且在点击页码时可以实现数据的跳转。本教程主要涉及Javascript语言的基础知识，如无基础可以先学习相关基础知识后再进行阅读。

实现思路

为了创建分页反应猫鼬，我们需要先确定数据总量和每页显示的数据数量。然后根据这两个变量计算需要创建的页数，并动态生成页码html。每次点击页码时，猫鼬将根据当前页码计算需要显示的数据，并将其展示出来。

代码实现

HTML

首先我们需要先创建HTML页面并设置好分页猫鼬的布局。

<div id="pagination"></div>
<ul id="data"></ul>

Javascript

接下来我们需要编写Javascript代码来完成分页反应猫鼬的功能。

定义变量

我们需要定义以下变量：

• currentPage：当前页码
• dataList：存储数据的数组
• pageSize：每页显示数据数量
• totalPage：总页数

// 定义变量
let currentPage = 1;
let dataList = [];
let pageSize = 10;
let totalPage = 0;

获取数据

接下来，我们需要获取数据并存储到dataList数组中，这里我们使用假数据代替。实际使用时可通过Ajax获取数据。

// 获取数据
function getData() {
    // 获取假数据并存储到dataList数组中
    for(let i = 0; i < 100; i++) {
        dataList.push(i + 1);
    }
}
getData();

计算页数

我们需要根据数据个数和每页显示数据数量计算总页数，并且针对较少数据进行隐藏多余页码。

// 计算总页数
function calculatePage() {
    totalPage = Math.ceil(dataList.length / pageSize);
    if(totalPage < 2) {
        pagination.innerHTML = "";
        return;
    }
    if(totalPage > 6) {
        if(currentPage < 5) { // 当前页码小于5时，显示1-5，省略号不显示
            for(let i = 1; i < 6; i++) {
                createPagination(i);
            }
            createPagination(0); // 省略号
            createPagination(totalPage); // 最后一页
        } else if(currentPage > totalPage - 4) { // 当前页码大于总页数-4时，显示totalPage-4 - totalPage，省略号不显示
            createPagination(1); // 第一页
            createPagination(0); // 省略号
            for(let i = totalPage - 4; i <= totalPage; i++) {
                createPagination(i);
            }
        } else { // 当前页码在5~总页数-4之间时，显示1，省略号，当前页码-2 ~ 当前页码+2，省略号，最后一页
            createPagination(1); // 第一页
            createPagination(0); // 省略号
            for(let i = currentPage - 2; i <= currentPage + 2; i++) {
                createPagination(i);
            }
            createPagination(0); // 省略号
            createPagination(totalPage); // 最后一页
        }
    } else { // 总页数小于等于6时，全部显示
        for(let i = 1; i <= totalPage; i++) {
            createPagination(i);
        }
    }
}

创建页码html

我们需要根据页数动态生成页码html，并为每个页码绑定点击事件。

// 创建页码html
function createPagination(i) {
    let pageHtml = "";
    let pagination = document.getElementById("pagination");
    let className = "";
    if(i === 0) {
        pageHtml = "<span>...</span>";
        className = "ellipsis";
    } else {
        pageHtml = "<a href='javascript:;'>"+i+"</a>";
    }
    if(i === currentPage) {
        className = "active";
    }
    let page = document.createElement("li");
    page.innerHTML = pageHtml;
    page.classList.add(className);
    page.onclick = function() {
        if(i !== currentPage && i !== 0) {
            currentPage = i;
            showData();
        }
    }
    pagination.appendChild(page);
}

数据展示

根据当前页码我们需要算出当前页码需要展示的起始与结束位置，并将数据展示出来。

// 数据展示
function showData() {
    let start = (currentPage - 1) * pageSize;
    let end = start + pageSize;
    end = Math.min(end, dataList.length);
    let dataHtml = "";
    for(let i = start; i < end; i++) {
        dataHtml += "<li>"+dataList[i]+"</li>";
    }
    document.getElementById("data").innerHTML = dataHtml;
    document.getElementById("pagination").innerHTML = "";
    calculatePage();
}
calculatePage();
showData();

至此，我们已经完成了分页反应猫鼬的编写，该程序可根据数据量和每页显示数量自动生成分页，并且动态跳转显示数据。完整代码如下：

// 定义变量
let currentPage = 1;
let dataList = [];
let pageSize = 10;
let totalPage = 0;

// 获取数据
function getData() {
    // 获取假数据并存储到dataList数组中
    for(let i = 0; i < 100; i++) {
        dataList.push(i + 1);
    }
}
getData();

// 计算总页数
function calculatePage() {
    totalPage = Math.ceil(dataList.length / pageSize);
    if(totalPage < 2) {
        pagination.innerHTML = "";
        return;
    }
    if(totalPage > 6) {
        if(currentPage < 5) { // 当前页码小于5时，显示1-5，省略号不显示
            for(let i = 1; i < 6; i++) {
                createPagination(i);
            }
            createPagination(0); // 省略号
            createPagination(totalPage); // 最后一页
        } else if(currentPage > totalPage - 4) { // 当前页码大于总页数-4时，显示totalPage-4 - totalPage，省略号不显示
            createPagination(1); // 第一页
            createPagination(0); // 省略号
            for(let i = totalPage - 4; i <= totalPage; i++) {
                createPagination(i);
            }
        } else { // 当前页码在5~总页数-4之间时，显示1，省略号，当前页码-2 ~ 当前页码+2，省略号，最后一页
            createPagination(1); // 第一页
            createPagination(0); // 省略号
            for(let i = currentPage - 2; i <= currentPage + 2; i++) {
                createPagination(i);
            }
            createPagination(0); // 省略号
            createPagination(totalPage); // 最后一页
        }
    } else { // 总页数小于等于6时，全部显示
        for(let i = 1; i <= totalPage; i++) {
            createPagination(i);
        }
    }
}

// 创建页码html
function createPagination(i) {
    let pageHtml = "";
    let pagination = document.getElementById("pagination");
    let className = "";
    if(i === 0) {
        pageHtml = "<span>...</span>";
        className = "ellipsis";
    } else {
        pageHtml = "<a href='javascript:;'>"+i+"</a>";
    }
    if(i === currentPage) {
        className = "active";
    }
    let page = document.createElement("li");
    page.innerHTML = pageHtml;
    page.classList.add(className);
    page.onclick = function() {
        if(i !== currentPage && i !== 0) {
            currentPage = i;
            showData();
        }
    }
    pagination.appendChild(page);
}

// 数据展示
function showData() {
    let start = (currentPage - 1) * pageSize;
    let end = start + pageSize;
    end = Math.min(end, dataList.length);
    let dataHtml = "";
    for(let i = start; i < end; i++) {
        dataHtml += "<li>"+dataList[i]+"</li>";
    }
    document.getElementById("data").innerHTML = dataHtml;
    document.getElementById("pagination").innerHTML = "";
    calculatePage();
}
calculatePage();
showData();

总结

至此，我们已经学习了如何使用Javascript编写一个简单的分页反应猫鼬，并且将其运用到了页面中。这个程序很简单，但已经完成了一个最基本的分页功能，在实际开发中可以根据需求进行扩展和改进，例如添加数据刷新、翻页动画等功能。