表格分页js代码

表格分页是一种常见的网页功能，用于将大量数据分成多个页面显示，以提高用户体验和页面加载速度。下面是一个简单的表格分页JavaScript代码示例，结合HTML和CSS来实现基本的分页功能。

基础概念

分页（Pagination）：将数据分成多个部分，每个部分称为一页，用户可以通过翻页来查看不同的数据部分。
页码（Page Number）：表示当前显示的数据页。
每页显示条数（Items per Page）：每一页显示的数据条数。

优势

提高加载速度：只加载当前页的数据，减少初始加载时间。
改善用户体验：用户可以快速找到所需信息，无需滚动长列表。
节省服务器资源：减少一次性传输的数据量，降低服务器负载。

类型

客户端分页：所有数据一次性加载到客户端，然后在前端进行分页处理。
服务器端分页：每次翻页时，向服务器请求当前页的数据。

应用场景

电商网站的产品列表
论坛的帖子列表
管理后台的数据表格

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Pagination</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        .pagination {
            margin-top: 10px;
            text-align: center;
        }
        .pagination button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be inserted here -->
        </tbody>
    </table>
    <div class="pagination">
        <button onclick="prevPage()">Previous</button>
        <span id="pageInfo"></span>
        <button onclick="nextPage()">Next</button>
    </div>

    <script src="pagination.js"></script>
</body>
</html>

JavaScript (pagination.js)

const data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 },
    { id: 4, name: 'David', age: 40 },
    { id: 5, name: 'Eve', age: 45 },
    { id: 6, name: 'Frank', age: 50 },
    { id: 7, name: 'Grace', age: 55 },
    { id: 8, name: 'Hank', age: 60 },
    { id: 9, name: 'Ivy', age: 65 },
    { id: 10, name: 'Jack', age: 70 }
];

const itemsPerPage = 3;
let currentPage = 1;

function displayData() {
    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const paginatedData = data.slice(start, end);

    const tableBody = document.querySelector('#dataTable tbody');
    tableBody.innerHTML = '';

    paginatedData.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
        `;
        tableBody.appendChild(row);
    });

    document.getElementById('pageInfo').textContent = `Page ${currentPage} of ${Math.ceil(data.length / itemsPerPage)}`;
}

function nextPage() {
    if (currentPage < Math.ceil(data.length / itemsPerPage)) {
        currentPage++;
        displayData();
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        displayData();
    }
}

// Initial display
displayData();

可能遇到的问题及解决方法

数据加载缓慢：
- 原因：数据量过大，一次性加载所有数据导致页面响应慢。
- 解决方法：使用服务器端分页，每次只请求当前页的数据。

分页按钮失效：
- 原因：分页逻辑错误，导致无法正确跳转到下一页或上一页。
- 解决方法：检查nextPage和prevPage函数中的条件判断，确保页码在合理范围内。
页面显示不正确：
- 原因：数据切片逻辑错误，导致显示的数据不符合预期。
- 解决方法：仔细检查displayData函数中的数据切片逻辑，确保正确计算起始和结束索引。

通过以上代码和解释，你应该能够实现一个基本的表格分页功能，并理解其背后的原理和常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

HTML表格水平大小调整问题

、、

我确信这是一个很容易解决的问题，但我还不是一个html/css高手！问题是，现在水平方向也是可滚动的，这是我不希望的。没有理由不能修复它。看起来垂直方向的滚动条占据了空间，所以浏览器现在认为它需要一个水平滚动来适应水平内容。令人沮丧！<table cellspacing="0" cellpadding="4" border="1" bordercolor="cccccc"> <thead styl

浏览 2提问于2010-10-02得票数 0

回答已采纳

2回答

如何通过单击Jquery中的标题对表列进行排序？

、、、、

请将此代码更改为字符串列排序。

浏览 2提问于2017-10-25得票数 1

2回答

如何防止Cognos跨页面拆分子组？

、、

我尝试过在区域和位置级别进行分页。这并没有给我想要的结果。关于我如何实现这一点有什么想法吗？编辑:忘记提到这是Cognos8.4。

浏览 2提问于2012-01-06得票数 0

回答已采纳

1回答

停用分页工具提示

、

我们使用Tabulator.js 4.7在表格中显示法规数据。我们使用分页功能。该表运行良好，但不幸的是，分页按钮上的工具提示有一个视觉错误(参见右下角的截图)： ? 如果没有，是否可以停用分页按钮上的工具提示？在tabulator.js文档中，我们只找到了用于停用表格中的工具提示的属性。致以最好的问候，谢谢你，杰瑞特

浏览 12提问于2020-06-29得票数 0

7回答

使用.html(htmlString)时的性能问题

、、

根据web浏览器的不同，使用$('#divCont').html(htmlTableString);呈现表格大约需要20秒。

浏览 7提问于2011-06-17得票数 0

回答已采纳

2回答

如何在bootstrap表上添加分页和搜索

、

我正在尝试使用javascript中的以下代码来呈现一个表： //Assigning data toresolution_url" data-formatter="LinkFormatter">Endpoint URL</th> </thead> </table

浏览 1提问于2018-03-07得票数 0

1回答

firefox的css问题

我有一个在FireFox上正确加载CSS的问题。页面内容从Db正确加载。当它出现在展示舞台上时，页面在Firefox中会变得一团糟，而在Chrome和IE中运行得很好。我在chrome上也遇到了同样的问题，我通过添加了。但这对FF一点帮助都没有。我怀疑当Firefox试图加载javascript时会发生这种情况，然后CSS就会变得混乱。这是我的CSS和演示页面 background: #282425 url(../images/background.jpg) no-r

浏览 5提问于2011-08-29得票数 1

回答已采纳

1回答

带分页的ReactJS BootstrapTable不适用于ExportCSV

、、、

我正在使用带有分页的ReactJS BootstrapTable。效果很好，但是我的用户希望能够将表中的数据导出到Excel电子表格中。只有当我没有分页时，它才能工作。(csv.js:120) at Object.<anonymous> (react-dom.production.min.js:49)

浏览 22提问于2019-10-17得票数 0

回答已采纳

5回答

对分页过程AJAX PHP的推荐

、、

我使用php作为后端代码，我只需要找到一种动态显示结果的方法。请给出建议。我忘记了使用它的站点的名称，并且我的链接历史记录过期了。描述：每次用户点击“下一步”，程序就会生成/加载新的结果。

浏览 6提问于2010-06-04得票数 4

回答已采纳

1回答

使用Mysql和PHP帮助进行分页

、、

我试图创建一个分页只与下一个和以前的链接，而不是1,2,3..etc。所以我说数据库中的项目1,2,3,4,5，每个项目都在一个页面上。

浏览 2提问于2010-10-14得票数 1

1回答

如何在Excel中分页后有条件地插入行？

、、、

为此，我希望遍历每一行并确定： Inserts = 0Counter = 1 If Rows(Counter).

浏览 4提问于2018-04-19得票数 0

回答已采纳

2回答

什么引导4组件只在css上工作(没有Jquery，系绳)

、

现在，我正在考虑使用带有角2的引导程序4，并查看了引导4 ，但仍然不清楚哪些组件依赖于jquery和/或tether.js，以及如果仅包含css，哪些组件可以工作。任何帮助都将不胜感激！

浏览 3提问于2016-09-16得票数 0

1回答

创建多个视图和分页的主干js

我需要一个例子来创建一个骨干js的例子，以显示表格在网格或列表视图和分页。有人能帮我举个例子吗？

浏览 2提问于2014-01-03得票数 0

1回答

如何避免打印预览中断表？

、、、、

我不想弄乱表格结构。此表数据是使用handlebars.js动态填充的。.page-break是我在每个部分后面添加的一个div类，它工作得很好。是否可以在分页符之前关闭表格，放入分页符，并在分页符之后重新打开表格？或者，我希望在下一页上显示的表只有在它被破坏时才会显示？我怎样才能做到这一点呢？

浏览 5提问于2017-11-03得票数 1

1回答

向表asp.NET添加分页

、、

</asp:TableHeaderRow>我本打算在其中添加分页，但是否可以使用Table实现分页，如果可以，如何实现？我的所有函数都已编写为与该表匹配。对于另一个页面，我使用Gridview进行了分页，但如果可能的话，我希望避免更改所有内容。

浏览 1提问于2016-06-15得票数 0

2回答

如果第一页上的行数太少，则在表格开始处强制分页符

、

我有一些带打印的表格，标题和很多行。有时，在打印时，新表格从页面的最下面一行开始。我想强制表格做一个分页符，如果页面上的剩余空间小于10厘米。(我正在尝试打印一本书，而表格是新的一章)。

浏览 0提问于2015-04-22得票数 2

1回答

通过htmldoc在每页上重复标题

、、

我正在尝试弄清楚如何在htmldoc输出的每一页上重复一组表头。我插入了CSS的方式(如下所示)，看看它是否可以工作，但我不相信htmldoc对CSS做了太多的事情。thead {display: table-header-group;}

浏览 1提问于2010-08-13得票数 6

回答已采纳

1回答

不使用JS()修改renderDataTable中的数据表选项

、

我有一些表格： # some code here当这个表被显示时，它有像分页和搜索框这样的东西。我想删除这些，但文档()似乎都是基于编辑JS/html的。我不知道如何将它与我的R代码集成在一起？或者它很简单，我只是没有得到预期的用途？我想删除分页和搜索框。

浏览 11提问于2017-03-06得票数 0

回答已采纳

1回答

Analysis Services处理失败

、

我正在Analysis Services中处理(分区)我的一个表，但它失败了。这个分区大约有6M行。我尝试处理其他有5M行的分区，它成功了。The following system error occurred: Insufficient quota to complete the requested service.

浏览 1提问于2020-04-21得票数 0

1回答