HTML静态表格分页（通过JS实现）

最新推荐文章于 2024-06-13 23:05:50 发布
最新推荐文章于 2024-06-13 23:05:50 发布
阅读量3.7k 收藏 10
点赞数
分类专栏： 前端相关 文章标签： HTML JavaScript IDEA XHTML ViewUI
html 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <span id="spanFirstt">第一页</span> <span id="spanPret">上一页</span> <span id="spanNextt">下一页</span> <span id="spanLastt">最后一页</span> 第<span id="spanPageNumt"></span>页/共<span id="spanTotalPaget"></span>页   
  10. <table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">  
  11. <tr>  
  12.     <th colspan="5">lishewen</th>  
  13. </tr>  
  14. <tbody id="tablelsw">  
  15.   <tr>  
  16.     <td bgcolor="#FFFFFF">1</td>  
  17.     <td bgcolor="#FFFFFF">算神</td>  
  18.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  19.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  20.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  21.   </tr>  
  22.   <tr>  
  23.     <td bgcolor="#FFFFFF">2</td>  
  24.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  25.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  26.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  27.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  28.   </tr>  
  29.   <tr>  
  30.     <td bgcolor="#FFFFFF">3</td>  
  31.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  32.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  33.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  34.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  35.   </tr>  
  36.   <tr>  
  37.     <td bgcolor="#FFFFFF">4</td>  
  38.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  39.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  40.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  41.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  42.   </tr>  
  43.   <tr>  
  44.     <td bgcolor="#FFFFFF">5</td>  
  45.     <td bgcolor="#FFFFFF">黎摄文</td>  
  46.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  47.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  48.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  49.   </tr>  
  50.   <tr>  
  51.     <td bgcolor="#FFFFFF">6</td>  
  52.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  53.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  54.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  55.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  56.   </tr>  
  57.   <tr>  
  58.     <td bgcolor="#FFFFFF">7</td>  
  59.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  60.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  61.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  62.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  63.   </tr>  
  64.   <tr>  
  65.     <td bgcolor="#FFFFFF">8</td>  
  66.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  67.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  68.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  69.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  70.   </tr>  
  71.   <tr>  
  72.     <td bgcolor="#FFFFFF">9</td>  
  73.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  74.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  75.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  76.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  77.   </tr>  
  78.   <tr>  
  79.     <td bgcolor="#FFFFFF">10</td>  
  80.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  81.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  82.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  83.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  84.   </tr>  
  85.   <tr>  
  86.     <td bgcolor="#FFFFFF">11</td>  
  87.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  88.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  89.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  90.     <td bgcolor="#FFFFFF">&nbsp;</td>  
  91.   </tr>  
  92.   </tbody>  
  93. </table>  
  94. <span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页   
  95. <!--  
  96.     <script language="javascript" src="Paging.js"></script>  
  97. -->  
  98. </body>  
  99. </html>  
  100. <script>  
  101. // JavaScript Document By lishewen   
  102. var theTable = document.getElementById("tablelsw");   
  103. var totalPage = document.getElementById("spanTotalPage");   
  104. var pageNum = document.getElementById("spanPageNum");   
  105.   
  106. var spanPre = document.getElementById("spanPre");   
  107. var spanNext = document.getElementById("spanNext");   
  108. var spanFirst = document.getElementById("spanFirst");   
  109. var spanLast = document.getElementById("spanLast");   
  110.   
  111. var totalPaget = document.getElementById("spanTotalPaget");   
  112. var pageNumt = document.getElementById("spanPageNumt");   
  113.   
  114. var spanPret = document.getElementById("spanPret");   
  115. var spanNextt = document.getElementById("spanNextt");   
  116. var spanFirstt = document.getElementById("spanFirstt");   
  117. var spanLastt = document.getElementById("spanLastt");   
  118.   
  119. var numberRowsInTable = theTable.rows.length;   
  120. var pageSize = 4;   
  121. var page = 1;   
  122.   
  123. //下一页   
  124. function next(){   
  125.   
  126.     hideTable();   
  127.        
  128.     currentRow = pageSize * page;   
  129.     maxRow = currentRow + pageSize;   
  130.     if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;   
  131.     for ( var i = currentRow; i< maxRow; i++ ){   
  132.         theTable.rows[i].style.display = '';   
  133.     }   
  134.     page++;   
  135.        
  136.     if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }   
  137.     showPage();   
  138.     preLink();   
  139.     firstLink();   
  140. }   
  141.   
  142. //上一页   
  143. function pre(){   
  144.   
  145.     hideTable();   
  146.        
  147.     page--;   
  148.        
  149.     currentRow = pageSize * page;   
  150.     maxRow = currentRow - pageSize;   
  151.     if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;   
  152.     for ( var i = maxRow; i< currentRow; i++ ){   
  153.         theTable.rows[i].style.display = '';   
  154.     }   
  155.        
  156.        
  157.     if ( maxRow == 0 ){ preText(); firstText(); }   
  158.     showPage();   
  159.     nextLink();   
  160.     lastLink();   
  161. }   
  162.   
  163. //第一页   
  164. function first(){   
  165.     hideTable();   
  166.     page = 1;   
  167.     for ( var i = 0; i<pageSize; i++ ){   
  168.         theTable.rows[i].style.display = '';   
  169.     }   
  170.     showPage();   
  171.        
  172.     preText();   
  173.     nextLink();   
  174.     lastLink();   
  175. }   
  176.   
  177. //最后一页   
  178. function last(){   
  179.     hideTable();   
  180.     page = pageCount();   
  181.     currentRow = pageSize * (page - 1);   
  182.     for ( var i = currentRow; i<numberRowsInTable; i++ ){   
  183.         theTable.rows[i].style.display = '';   
  184.     }   
  185.     showPage();   
  186.        
  187.     preLink();   
  188.     nextText();   
  189.     firstLink();   
  190. }   
  191.   
  192. function hideTable(){   
  193.     for ( var i = 0; i<numberRowsInTable; i++ ){   
  194.         theTable.rows[i].style.display = 'none';   
  195.     }   
  196. }   
  197.   
  198. function showPage(){   
  199.     pagepageNum.innerHTML = page;   
  200.     pagepageNumt.innerHTML = page;   
  201. }   
  202.   
  203. //总共页数   
  204. function pageCount(){   
  205.     var count = 0;   
  206.     if ( numberRowsInTable%pageSize != 0 ) count = 1;    
  207.     return parseInt(numberRowsInTable/pageSize) + count;   
  208. }   
  209.   
  210. //显示链接   
  211. function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; spanPret.innerHTML = "<a href='javascript:pre();'>上一页</a>";}   
  212. function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }   
  213.   
  214. function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'>下一页</a>";}   
  215. function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}   
  216.   
  217. function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>第一页</a>";}   
  218. function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}   
  219.   
  220. function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'>最后一页</a>";}   
  221. function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}   
  222.   
  223. //隐藏表格   
  224. function hide(){   
  225.     for ( var i = pageSize; i<numberRowsInTable; i++ ){   
  226.         theTable.rows[i].style.display = 'none';   
  227.     }   
  228.        
  229.     totalPage.innerHTML = pageCount();   
  230.     pageNum.innerHTML = '1';   
  231.        
  232.     totalPaget.innerHTML = pageCount();   
  233.     pageNumt.innerHTML = '1';   
  234.        
  235.     nextLink();   
  236.     lastLink();   
  237. }   
  238.   
  239. hide();   
  240. </script>  
rq2
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现表格分页显示,js表格分页实现代码
weixin_36109676的博客
06-24 1671
原料库管理function Page(iAbsolute,sTableId,sTBodyId,page){this.absolute = iAbsolute; //每页最大记录数this.tableId = sTableId;this.tBodyId = sTBodyId;this.rowCount = 0;//记录数this.pageCount = 0;//页数this.pageIndex = ...
html table 分页
09-21
html table page
HTML网页表格标签,HTML静态网页（标签、表格）
weixin_31222161的博客
06-16 381
HTML静态网页： 打开DREAMWEAVER，新建HTML，如下图： body的属性： bgcolor 页面背景色 background 背景壁纸、图片 text 文字颜色 topmargin 上边距 leftmargin 左边距 rightmargin 右边距 bottommargin 下边距 body属性用法示例： font color="" face="" sHTML静态网页：打开DREA...
HTML+JS实现分页功能
最新发布
YO__Y的博客
06-13 195
HTML+JS实现分页功能
js表格，可实现，分页、查询等操作
10-17
js表格，可实现客户端，分页、查询等操作,
html静态网页（导航条、表格、表单、音视频插入、照片框等）
03-29
该静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页，代码很基础，非常适合初学者。该静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页
jQuery表格列表分页样式特效代码
03-20
本资源提供了基于jQuery的表格列表分页样式特效代码，它可以帮助开发者轻松实现美观且功能丰富的分页功能。以下是对这个jQuery插件的详细解析。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、...
Layui实现数据表格默认全部显示(不要分页)
10-16
在本文中，我们将深入探讨如何使用Layui框架来实现数据表格默认全部显示，而无需分页功能。Layui是一款轻量级的前端UI框架，提供了丰富的组件，包括表格、按钮、表单等，方便开发者构建用户界面。在某些场景下，用户...
利用vue和element-ui设置表格内容分页的实例
08-27
Vue 和 Element UI 实现表格内容分页的实例分析 Vue 是一款流行的前端框架，而 Element UI 是一个基于 Vue 的 UI 组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。在本文中，我们将探讨如何使用 Vue...
jQuery表格分页排序插件.zip
07-11
这个插件能够帮助开发者轻松地将静态表格转化为具有动态分页和排序功能的交互式表格。下面将详细阐述jQuery表格分页排序插件的核心概念、工作原理以及如何在项目中应用。 1. **核心概念**： - **分页**：分页是将...
基于Vuejs的表格分页组件
08-09
通过阅读和学习这些代码，开发者可以了解如何将Vue.js与Bootstrap结合，实现一个功能完善的表格分页组件。 总之，理解并掌握基于Vue.js的表格分页组件的实现，不仅可以提升前端开发技能，还能为实际项目提供强大的...
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件存储到内存，前端需要那一段的数据，后端就给前端那一页的数据。非常适合前端新手。同时分为两个文件serverImage和clientImage，其中包含项目源码,一些配置文件，以及后端需要处理的两个csv文件，同时包含生成docker镜像的Dockerfile，可直接在serverImage和clientImage目录先直接build客户端镜像和服务端镜像。
html前台分页,静态分页,使用及其简单,支持多个列表
05-24
html前台分页,静态分页,使用及其简单,支持多个列表
简单实用的table分页
09-07
数据少想一次读完，去下载了好多分页的实例，不是代码有错，有缺，就是乱的很，能用但是想改就无从下手，浪费了很多分，没办法，自己动脑子，写了个table分页的例子，分享给大家，给个一分意思意思。 注释很详细，适合菜鸟和初学者，大神就不要下了。
一个对html表格分页的类
04-16
可以将一个已经生成的html表格转化成可分页和查询的表格完全用js实现不涉及任何后台技术，不支持ajax。
js+table分页
01-21
js+table分页实现，压缩包里有一个.html文件一个jQuery包，下载后可直接打开html文件，实现的功能包括：当前页、数据总量、页数、首页、上一页、下一页、尾页、页数跳转，只是功能实现没写css做美化
【4001】通过html做一个静态页面的表格表单，嘿嘿。
Caojian_0的博客
08-03 1437
【4001】通过html做一个简单的表格表单，嘿嘿。
html获取table行数分页显示,Html5分页显示Table
weixin_39622283的博客
06-09 682
Html：Pick Onespan{/*display:inline;*/margin:0 auto}.header{background: #ccc;display: flex;justify-content: space-between;}.nowtime{font-size:32px;font-weight:bold;}.tname{font-size:48px;color:#9400D3;...
html css 表格分页 样式
wgq2020的博客
09-30 524
【代码】html css 表格分页 样式。
用layui实现数据表格table搜索静态数据的功能
04-25
您需要先定义一个table实例，用静态数组填充数据，然后调用layui的table.render()将数据渲染到表格中。在render()方法中，您可以使用toolbar属性来定义搜索框，然后在search()方法中实现搜索功能。以下是一个简单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值