原生的 JavaScript 分页：思想的演变

前端

2023-12-09 09:31:27

引言

分页是处理大型数据集时不可或缺的技术手段之一。在网页或应用程序中展示大量信息时，采用分页可以提升用户体验，减少一次性加载的数据量，从而减轻服务器负担。原生的JavaScript分页技术因其灵活性和与框架无关性而备受青睐。

分页的核心思想

数据切片

数据切片是分页的基础。通过计算出当前页面应该展示的数据范围，并从总数中抽取相应部分进行显示，实现了对大规模数据集的有效管理。

用户交互

用户交互是指当用户导航至不同页面时，能够动态加载相应的内容而无需刷新整个网页。这通常通过JavaScript监听用户的点击事件来实现。

实现原生的 JavaScript 分页

步骤一：准备数据源

首先需要有一个数据源作为分页的基础。这里假设我们有一组JSON格式的数据。

const data = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Jane'},
  // 更多数据项...
];

步骤二：定义分页逻辑

创建一个函数用于根据当前页码和每页显示的项目数量来计算出需要展示的数据范围。

function getPageData(data, currentPage = 1, itemsPerPage = 5) {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return data.slice(startIndex, startIndex + itemsPerPage);
}

步骤三：页面导航逻辑

为了实现分页功能，需要添加一些HTML元素用于展示和导航。

<div id="content"></div>
<nav aria-label="Page navigation">
  <ul class="pagination" id="pagination"></ul>
</nav>

<script>
document.getElementById('content').innerHTML = getPageData(data).map(item => `<p>${item.name}</p>`).join('');
// 动态生成分页导航
function generatePagination(totalPages) {
    const paginationDiv = document.getElementById('pagination');
    for (let i = 1; i <= totalPages; i++) {
        let link = document.createElement("li");
        link.innerHTML = `<a href="javascript:void(0)" onclick="showPage(${i})">${i}</a>`;
        paginationDiv.appendChild(link);
    }
}

function showPage(pageNumber) {
    const dataToShow = getPageData(data, pageNumber);
    document.getElementById('content').innerHTML = '';
    for (const item of dataToShow) {
        document.getElementById('content').innerHTML += `<p>${item.name}</p>`;
    }
}
generatePagination(Math.ceil(data.length / 5));
</script>