首页 > web前端 > js教程 > 正文

如何使用 JavaScript 实现表格分页功能?

WBOY
发布: 2023-10-20 18:19:46
原创
3238人浏览过

如何使用 javascript 实现表格分页功能?

如何使用 JavaScript 实现表格分页功能?

随着互联网的发展,越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下,需要将数据进行分页展示,以提升用户体验。本文将介绍如何使用 JavaScript 实现表格分页功能,并提供具体的代码示例。

一、HTML 结构

首先,我们需要准备一个 HTML 结构来承载表格和分页按钮。我们可以使用 <table> 标签来创建表格,使用 <code><div> 标签来作为分页按钮的容器。具体代码如下:<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记(深入)</a>”;</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;table id=&quot;myTable&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;列名1&lt;/th&gt; &lt;th&gt;列名2&lt;/th&gt; &lt;th&gt;列名3&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;!-- 表格数据 --&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div id=&quot;pagination&quot;&gt; &lt;!-- 分页按钮 --&gt; &lt;/div&gt;</pre>

登录后复制
</div><p>二、JavaScript 实现</p> <p>接下来,我们使用 JavaScript 来实现表格分页功能。首先,我们需要定义一些变量:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>var table = document.getElementById(&quot;myTable&quot;); // 表格 var tbody = table.getElementsByTagName(&quot;tbody&quot;)[0]; // 表格的 tbody 元素 var rowsPerPage = 10; // 每页显示的行数 var currentPage = 0; // 当前页码 var totalPages = Math.ceil(tbody.rows.length / rowsPerPage); // 总页数 var pagination = document.getElementById(&quot;pagination&quot;); // 分页按钮的容器</pre>
登录后复制
</div><p>然后,我们创建一个函数来显示指定页码的数据:</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/10527"> <img src="https://img.php.cn/upload/webcode/000/000/005/176256540366506.png" alt="万华互连中英文企业网站系统2012"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/10527">万华互连中英文企业网站系统2012</a> <p>专业的企业网站管理系统,专为中小企业公司开发设计,能让企业轻松管理网站,强大的后台功能,可随意增减栏目,有多种企业常用的栏目模块功能。多级分类,管理文章,图片,文字编辑,留言管理,人才,软件下载等。可让企业会上网就会管理网站,轻松学会使用。 系统功能模块有:单页(如企业简介,联系内容等单页图文)、文章(新闻)列表、产品(图片、订单、规格说明等)、图片、下载、人才招聘、视频、机构组识、全国销售网点图</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="万华互连中英文企业网站系统2012"> <span>0</span> </div> </div> <a href="/xiazai/code/10527" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="万华互连中英文企业网站系统2012"> </a> </div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>function displayPage(page) { // 清空表格 while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } // 计算起始行和结束行的索引 var startIndex = page * rowsPerPage; var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length); // 将指定页码的数据添加到表格中 for (var i = startIndex; i &lt; endIndex; i++) { tbody.appendChild(tbody.rows[i].cloneNode(true)); } }</pre>
登录后复制
</div><p>接下来,我们创建一个函数来生成分页按钮:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>function createPagination() { // 清空分页按钮 while (pagination.firstChild) { pagination.removeChild(pagination.firstChild); } // 添加上一页按钮 var previousButton = document.createElement(&quot;button&quot;); previousButton.innerText = &quot;上一页&quot;; previousButton.onclick = function() { currentPage = Math.max(currentPage - 1, 0); displayPage(currentPage); }; pagination.appendChild(previousButton); // 添加页码按钮 for (var i = 0; i &lt; totalPages; i++) { var pageButton = document.createElement(&quot;button&quot;); pageButton.innerText = i + 1; pageButton.onclick = function() { currentPage = parseInt(this.innerText) - 1; displayPage(currentPage); }; pagination.appendChild(pageButton); } // 添加下一页按钮 var nextButton = document.createElement(&quot;button&quot;); nextButton.innerText = &quot;下一页&quot;; nextButton.onclick = function() { currentPage = Math.min(currentPage + 1, totalPages - 1); displayPage(currentPage); }; pagination.appendChild(nextButton); }</pre>
登录后复制
</div><p>最后,我们调用 <code>displayPage
函数和 createPagination 函数来显示初始页码的数据并生成分页按钮:

displayPage(currentPage);
createPagination();
登录后复制

三、完整代码示例

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
var rowsPerPage = 10;
var currentPage = 0;
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage);
var pagination = document.getElementById("pagination");

function displayPage(page) {
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  var startIndex = page * rowsPerPage;
  var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);

  for (var i = startIndex; i < endIndex; i++) {
    tbody.appendChild(tbody.rows[i].cloneNode(true));
  }
}

function createPagination() {
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  var previousButton = document.createElement("button");
  previousButton.innerText = "上一页";
  previousButton.onclick = function() {
    currentPage = Math.max(currentPage - 1, 0);
    displayPage(currentPage);
  };
  pagination.appendChild(previousButton);

  for (var i = 0; i < totalPages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerText = i + 1;
    pageButton.onclick = function() {
      currentPage = parseInt(this.innerText) - 1;
      displayPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }

  var nextButton = document.createElement("button");
  nextButton.innerText = "下一页";
  nextButton.onclick = function() {
    currentPage = Math.min(currentPage + 1, totalPages - 1);
    displayPage(currentPage);
  };
  pagination.appendChild(nextButton);
}

displayPage(currentPage);
createPagination();
登录后复制

四、总结

通过上述的 JavaScript 代码,我们可以实现表格分页功能。首先,我们需要准备好包含表格和分页按钮的 HTML 结构。然后,我们使用 JavaScript 来控制显示指定页码的数据,并生成分页按钮。最后,调用相关函数来显示初始页码的数据并生成分页按钮。本文提供的代码示例可以帮助你了解如何使用 JavaScript 实现表格分页功能,并可以根据自己的需求进行修改和定制。希望本文对你有所帮助!

以上就是如何使用 JavaScript 实现表格分页功能?的详细内容,更多请关注php中文网其它相关文章!

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号