这是一个页面级的分页，先获取页面表格，然后对表格进行分页。
需要页面加载完成才能获得表格，所以js代码应该在表格最后。
我的方法是把显示按钮的层与js代码写到自定义标签里。按钮当然是放在表格之后
提供下载的例子是可以直接演示的。
表格部分
<table>
<thead>
<tr>
<th width="4%">
</th>
<th width="5%">
EMPNO
</th>
<th width="12%">
ENAME
</th>
<th width="12%">
JOB
</th>
<th width="19%">
MGR
</th>
<th width="19%">
HIREDATE
</th>
<th width="12%">
SAL
</th>
<th width="12%">
COMM
</th>
<th width="4%">
DEPTNO
</th>
</tr>
</thead>
<tbody id="tbody1" style="display: none;">
<TR>
<TD>
1
</TD>
<TD>
7369
</TD>
<TD>
SMITH
</TD>
<TD>
CLERK
</TD>
<TD>
7902
</TD>
<TD>
1980-12-17
</TD>
<TD>
800.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
2
</TD>
<TD>
7499
</TD>
<TD>
ALLEN
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-2-20
</TD>
<TD>
1600.00
</TD>
<TD>
300.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
3
</TD>
<TD>
7521
</TD>
<TD>
WARD
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-2-22
</TD>
<TD>
1250.00
</TD>
<TD>
500.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
4
</TD>
<TD>
7566
</TD>
<TD>
JONES
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-4-2
</TD>
<TD>
2975.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
5
</TD>
<TD>
7654
</TD>
<TD>
MARTIN
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-9-28
</TD>
<TD>
1250.00
</TD>
<TD>
1400.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
6
</TD>
<TD>
7698
</TD>
<TD>
BLAKE
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-5-1
</TD>
<TD>
2850.00
</TD>
<TD></TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
7
</TD>
<TD>
7782
</TD>
<TD>
CLARK
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-6-9
</TD>
<TD>
2450.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
<TR>
<TD>
8
</TD>
<TD>
7788
</TD>
<TD>
SCOTT
</TD>
<TD>
ANALYST
</TD>
<TD>
7566
</TD>
<TD>
1987-4-19
</TD>
<TD>
3000.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
9
</TD>
<TD>
7839
</TD>
<TD>
KING
</TD>
<TD>
PRESIDENT
</TD>
<TD>
1981-11-17
</TD>
<TD>
5000.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
<TR>
<TD>
10
</TD>
<TD>
7844
</TD>
<TD>
TURNER
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-9-8
</TD>
<TD>
1500.00
</TD>
<TD>
0.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
11
</TD>
<TD>
7876
</TD>
<TD>
ADAMS
</TD>
<TD>
CLERK
</TD>
<TD>
7788
</TD>
<TD>
1987-5-23
</TD>
<TD>
1100.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
12
</TD>
<TD>
7900
</TD>
<TD>
JAMES
</TD>
<TD>
CLERK
</TD>
<TD>
7698
</TD>
<TD>
1981-12-3
</TD>
<TD>
950.00
</TD>
<TD></TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
13
</TD>
<TD>
7902
</TD>
<TD>
FORD
</TD>
<TD>
ANALYST
</TD>
<TD>
7566
</TD>
<TD>
1981-12-3
</TD>
<TD>
3000.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
14
</TD>
<TD>
7934
</TD>
<TD>
MILLER
</TD>
<TD>
CLERK
</TD>
<TD>
7782
</TD>
<TD>
1982-1-23
</TD>
<TD>
1300.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
</tbody>
</table>
<br />
<div style="float: right;">
共
<span id="count"></span>页 当前第
<span id="index"></span>页
<input type="text" id="goText" size="3">
<input type="button" id="goButton" value="GO">
<input type="button" id="first" value="第一页">
<input type="button" id="previous" value="上一页">
<input type="button" id="next" value="下一页">
<input type="button" id="last" value="最后页">
</div>
js部分
<script type="text/javascript">
//每页显示记录数
var pageSize = 5;
var content = $("#tbody1 > tr");
//总记录数
var recordCount = content.length;
//总页数
var pageCount = parseInt((recordCount + pageSize - 1) / pageSize);
//显示总记录数
$("#count").html(pageCount);
function showRow(pageNum){
var text="";
var pageStart = (pageNum - 1) * pageSize;
var pageEnd = pageStart + pageSize;
//结束记录数大于总记录数，最后一页时
if(pageEnd > recordCount){
pageEnd = recordCount;
}
for(i=pageStart;i<pageEnd;i++){
text += "<tr>"+content[i].innerHTML+"</tr>";
}
$("tbody").html(text);
//显示当前第几页
$("#index").html(pageNum);
}
$(function(){
//当前页数标示，初始为1
var pageIndex = 1;
showRow(pageIndex);
//页面舒适化时隐藏，完成分页后再显示
$("#tbody1").css("display","");
//跳转到指定页
$("#goButton").click(function(){
var obj = $("#goText")
var text = obj.val();
if(isNaN(text)){
alert("请输入一个数字！");
obj.select();
obj.focus();
return false;
}else{
var pageNum = parseInt(text);
if(pageNum < 1 || pageNum > pageCount){
alert("超出页码范围！");
obj.select();
obj.focus();
return false;
}else{
obj.select();
showRow(pageNum);
}
}
});
//首页
$("#first").click(function(){
pageIndex = 1;
showRow(pageIndex);
});
//最后一页
$("#last").click(function(){
pageIndex = pageCount;
showRow(pageIndex);
});
//上一页
$("#previous").click(function(){
if(pageIndex == 1){
alert("当前为第一页！");
return false;
}else{
pageIndex --;
}
showRow(pageIndex);
});
//下一页
$("#next").click(function(){
if(pageIndex == pageCount){
alert("当前最后一页！");
return false;
}else{
pageIndex ++;
}
showRow(pageIndex);
});
});
</script>
分享到：
相关推荐
在JavaScript和jQuery的世界里，"js jquery实现table假分页"是一个常见的需求，尤其是在处理大量数据展示时。分页能够帮助优化用户体验，避免一次性加载过多数据导致页面响应变慢。假分页，又称为模拟分页，是通过...
本教程将详细讲解如何使用jQuery实现Table的分页跳转。 一、jQuery分页原理 jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行，以实现分页显示。通常会结合后端接口获取数据，根据每页显示的...
总的来说，Jquery实现的分页功能是通过结合DOM操作、事件监听和Ajax请求，为用户提供直观、便捷的数据浏览体验。通过对Jquery和相关分页插件的学习与实践，开发者可以轻松地在项目中实现高效的分页功能。
jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`，在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...
本知识点主要讲解如何使用jQuery实现前台分页，这是一种无需服务器端处理，完全在客户端进行的数据分页技术。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在...
总的来说，使用jQuery实现数据动态加载分页需要结合前端和后端的知识，通过监听用户滚动事件、发送AJAX请求、处理服务器返回的数据以及适当地更新页面内容，可以创建出一个流畅且高效的分页系统。
本示例是利用jQuery库实现的无刷新分页功能，旨在提高用户体验，减少服务器负载，并优化页面性能。 jQuery是一个轻量级、功能强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在jQuery中...
jQuery分页主要通过JavaScript来实现页面内容的动态加载和切换。它根据服务器返回的数据总数，以及每页显示的数据量，计算出总页数，并在界面上创建相应的分页按钮。用户点击分页按钮时，会触发相应的事件，向服务器...
总的来说，jQuery实现的无刷新分页插件是一种高效且易于实现的方法，它可以帮助你的网站或应用提供更流畅的用户体验，减少服务器负载，并优化数据加载速度。通过熟练掌握这种技术，你可以提升Web开发的专业水平。
在网页开发中，为了提供更好的用户体验，页面无...总的来说，jQuery和JSON的结合为实现页面无刷新分页提供了一种高效且灵活的解决方案。通过理解这个过程并熟练运用相关工具，开发者可以构建出更加流畅的Web应用程序。
总结来说，使用jQuery实现静态页面分页涉及客户端与服务器端的协同工作，包括用户交互处理、Ajax请求、JSON数据交换以及DOM操作。结合Visual Studio和SQL Server，可以构建一个高效、友好的分页系统。虽然这个例子...
"jQuery+JSON"实现的页面无刷新列表分页就是这样的一个技术，它允许用户在不重新加载整个网页的情况下查看分页内容。这里我们将深入探讨这个主题，包括它的原理、实现方式以及优势。 **一、页面无刷新分页原理** ...
`jQuery`库因其轻量级、易用性和丰富的插件支持，成为了实现这一功能的理想选择。本文将深入探讨如何使用`jQuery`和`JSON`来创建一个无刷新分页插件。 首先，`jQuery`是一个广泛使用的JavaScript库，它简化了DOM...
在本文中，我们将探讨如何在Struts2框架下利用jQuery实现无刷新分页，解决描述中提到的问题。 首先，让我们了解无刷新分页的基本概念。无刷新分页是指用户在浏览页面内容时，无需手动刷新整个页面即可切换到不同的...
jQuery作为一种轻量级的JavaScript库，提供了简单易用的API，使得实现页面分页变得更加方便。本篇文章将围绕jQuery页面分页展开，介绍其原理、方法以及相关的DWR（Direct Web Remoting）和EXT分页实现。 1. **...
以上就是使用jQuery实现表格动态分页的基本流程。实际应用中，可能还需要考虑错误处理、无数据时的展示、优化性能（例如使用懒加载）等问题。记得在开发过程中，确保与后端接口的协调一致，以实现完整的数据交换。 ...
jQuery分页则是利用jQuery的功能来处理网页中的数据分块显示，通常与服务器端的接口配合，通过Ajax请求获取JSON格式的数据，以实现动态加载和切换页面。 JSON（JavaScript Object Notation）是一种轻量级的数据交换...
本篇文章将详细介绍如何使用jQuery实现分页功能，并探讨其自带的样式以及如何传递多个参数。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在实现分页功能时...
三、使用jQuery实现表格分页 1. 引入jQuery和分页插件：首先需要在HTML文件中引入jQuery库和选择的分页插件CSS/JS文件。 2. 初始化表格：使用jQuery选择器找到需要分页的表格，并进行初始化，设置分页参数，如每页...