JS_表格分页

最新推荐文章于 2022-04-02 07:48:43 发布
最新推荐文章于 2022-04-02 07:48:43 发布
阅读量583 收藏 1
点赞数
分类专栏： HTML 文章标签： function table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyg__wangjian/article/details/6290255
版权

<html>

<head>

<script type="text/javascript">
function goPage(pno,psize){

 var itable = document.getElementById("idData");

 var num = itable.rows.length;//表格行数

 var totalPage = 0;//总页数

 var pageSize = psize;//每页显示行数

 if((num-1)/pageSize > parseInt((num-1)/pageSize)){  

     totalPage=parseInt((num-1)/pageSize)+1;  

    }else{  

     totalPage=parseInt((num-1)/pageSize);  

    }  

 var currentPage = pno;//当前页数

 var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  

    var endRow = currentPage * pageSize+1;//结束显示的行  

    endRow = (endRow > num)? num : endRow;

 //前三行始终显示

 for(i=0;i<1;i++){

  var irow = itable.rows[i];

  irow.style.display = "block";

 }

 for(var i=1;i<num;i++){

  var irow = itable.rows[i];

  if(i>=startRow&&i<endRow){

   irow.style.display = "block";

  }else{

   irow.style.display = "none";

  }

 }

 var pageEnd = document.getElementById("pageEnd");

 var tempStr = "共"+(num-1)+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";

 if(currentPage>1){

  tempStr += "<a href=/"#/" onClick=/"goPage("+(currentPage-1)+","+psize+")/">上一页</a>"

 }else{

  tempStr += "上一页";

 }

 if(currentPage<totalPage){

  tempStr += "<a href=/"#/" onClick=/"goPage("+(currentPage+1)+","+psize+")/">下一页</a>";

 }else{

  tempStr += "下一页";

 }

 if(currentPage>1){

  tempStr += "<a href=/"#/" onClick=/"goPage("+(1)+","+psize+")/">首页</a>";

 }else{

  tempStr += "首页";

 }

 if(currentPage<totalPage){

  tempStr += "<a href=/"#/" onClick=/"goPage("+(totalPage)+","+psize+")/">尾页</a>";

 }else{

  tempStr += "尾页";

 }

 document.getElementById("barcon").innerHTML = tempStr;

}

</script>

</head>

<body onLoad="goPage(1,10);">

 <table id="idData" width="70%">

  <tr>

   <td>姓名</td>

   <td>年龄</td>

   <td>性别</td>

   <td>户籍</td>

  </tr>

  <tr>

   <td>刘金钟</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong1</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong2</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong3</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong4</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong5</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong6</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong7</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

  <tr>

   <td>liujinzhong</td>

   <td>25</td>

   <td>男</td>

   <td>山西吕梁</td>

  </tr>

 </table>

 <table width="60%" align="right">

  <tr>

   <td>

    <div id="barcon" name="barcon"></div>

   </td>

  </td>

 </table>

</body>

</html>

lyg__wangjian
关注
专栏目录
js分页、表格
厚积薄发，博观约取
12-16 1008
js分页代码： //js分页 //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数 var jsPage = function(el, count, pageStep, pageNum, fnGo) { this.getLink = function(fnGo, index, pageNum, text) {
js表格逻辑分页
weixin_46083166的博客
07-15 313
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table class="table"> <!--id与下面js对应--> <tbody id="idData" class="text-center"> &l.
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
js实现分页
huazai0803的专栏
08-16 303
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 原料库管理 function Page(
js实现表格分页
龙马的猫
07-05 2407
js实现表格分页，可点击按钮跳转，也可输入页数跳转
vue.js表格分页示例
10-21
在本篇文章中，将会详细介绍使用Vue.js实现表格分页功能的示例，并讲解其涉及的核心知识点，包括如何通过Ajax异步加载数据以及如何将分页功能组件化。 ### Vue.js表格分页组件 在Web开发中，表格数据展示常常需要...
AlaiJSCtr.rar_javascript_javascript 树_目录树_菜单控件_表格
09-24
再者，"表格"（表格）是数据展示的常用方式，JavaScript表格控件能帮助开发者创建具有动态特性的表格，比如排序、过滤、分页和编辑功能。这些功能使得用户在大量数据中更容易找到所需信息，同时提供了更好的交互体验...
js表格分页实现代码
10-29
本文将详细介绍一个简单的JavaScript表格分页实现方法，并对代码进行深入分析。 #### 二、核心概念 在了解具体实现之前，我们先明确几个关键概念： 1. **每页最大记录数**：即每页显示的数据数量。 2. **记录数**...
Javascript vue.js表格分页，ajax异步加载数据
10-21
在JavaScript和Vue.js框架中，实现表格分页和AJAX异步加载数据是常见的需求，尤其是在处理大量数据时，为了提高用户体验，我们会将数据分批加载。以下将详细讲解这个过程。 首先，Vue.js允许我们创建自定义组件，...
JS 表格分页
梦想家博客
03-30 348
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; table {
js 表格分页
09-20
表格分页表格分页表格分页表格分页表格分页表格分页表格分页表格分页表格分页表格分页表格分页表格分页
js表格，可实现，分页、查询等操作
10-17
js表格，可实现客户端，分页、查询等操作,
VueJS实现表单分页
03-31
VueJS实现表单分页，包括审核状态，VueJS2.0实例demo，解压打开即可，无依赖环境
基于jquery的表格筛选，排序，分页js
04-07
由于代码有些问题，现取消资源分，等有空再修改一下
分页表格示例
01-05
jquery 表格分页等操作实现代码(pagedown，pageup)
一个纯js写的分页功能，表格数据为json串
yunsyz的专栏
02-18 1528
什么也不说了，直接上代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> 分页
在 JavaScript 中为任何表格添加分页
allway2的博客
04-02 1842
分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些乏味且不必要的复杂任务。但是一项非常需要的繁琐而复杂的任务。以下脚本旨在一劳永逸地处理 HTML 表格的所有客户端分页。 要详细了解分页逻辑的工作原理，请随时查看我的博客文章。 只要它有助于您的编码之旅，请随意使用它并以您希望的任何方式进行修改。我只想问，如果你这样做的话，你会以我的方式说些客气话。 在我们开始之前，如果您对
纯js实现表格分页效果
这个人很懒什么都没有留下
11-02 975
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> var arr = [ ['吴爱敏', '百度1班', 88], ['钱丽萍', '百度1班', 90], ['刘文辉', '百度1班', 93], ['马传占'
JS前端表格分页
郑子健的博客
07-10 602
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title> <!-- 引入elementUI样式 --> <link rel
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值