表格分页js代码怎么写

以下是一个简单的表格分页 JavaScript 代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格分页示例</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    table,
    th,
    td {
      border: 1px solid black;
    }

    .pagination {
      margin-top: 10px;
      text-align: center;
    }

    .pagination button {
      margin: 0 5px;
    }
  </style>
</head>

<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格数据将通过 JavaScript 动态生成 -->
    </tbody>
  </table>
  <div class="pagination">
    <!-- 分页按钮将通过 JavaScript 动态生成 -->
  </div>

  <script>
    const data = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      // ... 更多数据
    ];
    const itemsPerPage = 10; // 每页显示的条目数
    let currentPage = 1; // 当前页码

    function renderTable(page) {
      const start = (page - 1) * itemsPerPage;
      const end = start + itemsPerPage;
      const pageData = data.slice(start, end);

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

      pageData.forEach(item => {
        const row = document.createElement('tr');
        const idCell = document.createElement('td');
        idCell.textContent = item.id;
        const nameCell = document.createElement('td');
        nameCell.textContent = item.name;
        row.appendChild(idCell);
        row.appendChild(nameCell);
        tbody.appendChild(row);
      });
    }

    function renderPagination() {
      const totalPages = Math.ceil(data.length / itemsPerPage);
      const pagination = document.querySelector('.pagination');
      pagination.innerHTML = '';

      for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.textContent = i;
        button.addEventListener('click', () => {
          currentPage = i;
          renderTable(currentPage);
          renderPagination();
        });
        if (i === currentPage) {
          button.disabled = true;
        }
        pagination.appendChild(button);
      }
    }

    renderTable(currentPage);
    renderPagination();
  </script>
</body>

</html>

基础概念：分页是将大量的数据按照一定的规则分成多个页面进行展示，以提高用户体验和数据加载效率。

优势：

提高页面加载速度，避免一次性加载大量数据导致页面卡顿。
方便用户查看和管理大量数据。

类型：

前端分页：在客户端进行数据的分页处理。
后端分页：在服务器端进行数据的分页处理，客户端只负责展示。

应用场景：

数据库查询结果的分页展示。
大型列表或表格的数据展示。

常见问题及解决方法：

分页数据不准确：确保计算总页数和每页数据的逻辑正确。
分页按钮状态错误：在切换页面时，及时更新当前页码并重新渲染分页按钮的状态。

希望这个示例对你有所帮助，如有其他需求，请继续提问。

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

有帮助

没帮助

水平布局

、、

我正在解决一个问题，我试图创建一个具有自动分页的水平tumblr主题。我使用非常简单的表格进行布局： <!Javascript的自动分页功能非常简单。您必须将post放入div，但不能将div放入tr或table。如果我把整个表格放在div中，水平布局自然会中断。你知道怎么解决这个问题吗？--To here--></div> 编辑:这是

浏览 3提问于2011-10-30得票数 3

回答已采纳

1回答

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

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

回答已采纳

1回答

现在怎么写代码？

、

在过去的一年里，我一直在努力让我的头围绕着所有我需要的东西和工具，以便更有效、更快地编写代码，但我似乎做不到。在我的脑海里都是一团糟。

浏览 1提问于2013-12-22得票数 0

2回答

如何在angularjs中导出表中的整个数据，包括所有分页数据？

、、

我正在寻找一个解决方案，从一个表中导出所有数据(包括分页数据，这也有排序或过滤数据，所以不能直接使用数组)。下面我给出了我的代码，不知何故，我的不工作，但我能够在我的本地代码库上进行导出。

浏览 5提问于2014-12-01得票数 2

回答已采纳

2回答

dataTables将css类分配给分页包装器

、、、、

我有一个包含最基本的初始化代码的dataTable。但是，我需要为出现在表格底部的分页分配一个自定义分页css类(我想分配Twitter引导分页类)。我该怎么做呢？下面是我的代码： /* Build the DataTable with third column

浏览 0提问于2014-02-03得票数 11

2回答

Rails activerecord-声誉-系统范围/查询问题

、、、

我正在实现，但在处理最受欢迎的文章时遇到了问题。def index @loved_articles = Article.page(params[:page]).find_with_reputation(:votes, :all, {:order => 'votes DESC, created_at DESC'})end/arti

浏览 2提问于2012-12-07得票数 0

回答已采纳

2回答

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

、、、、

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

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

3回答

如果我没有分页会发生什么?只需循环post...why需要分页，页脚就行了？

、、、

还有，如果我没有分页怎么办？只需保持不分页显示的帖子？反正我也不需要脚。{% for post in Posts %}{{post.content}}{% endfor %} 上面的简单代码可以做到这一点，如果没有加载更多或分页我真的不认为需要分页和加载更多的特性，因为我不想要因为我不知道如何写它们.

浏览 4提问于2016-04-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

回答已采纳

1回答

是否可以在Android Jetpack Paging3库中关闭分页，以便一次加载所有数据？

、、、

短名单应该在没有分页的情况下立即加载。长列表必须逐页加载。我不想写两个不同的代码，我想通过简单地更改参数来使用这两种情况下的分页库。我该怎么做呢？

浏览 23提问于2020-10-09得票数 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

回答已采纳

3回答