jQuery实现页面级分页

最新推荐文章于 2021-01-25 10:21:35 发布
最新推荐文章于 2021-01-25 10:21:35 发布
阅读量110 收藏
点赞数
文章标签： jQuery CSS HTML ViewUI
这是一个页面级的分页，先获取页面表格，然后对表格进行分页。
需要页面加载完成才能获得表格，所以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>
shaq34
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
虚拟内存映射的分页机制：使用一级页表
weixin_42686335的博客
03-18 1307
虚拟内存映射的分页机制：使用一级页表 提前熟悉 核心 关键词 的含义： 内存 内存页面 虚拟地址 物理地址 页面页码 页偏移 页表数组 高位，低位 总结： 目的： 通过给的虚拟地址（一个32位数字） 来求出 物理地址（一个32位数字） 需要借助的媒介：已经算好的 页表数组。数组元素代表 目标物理地址所在的 内存页面页码。可通过数组下标 读取页表数组的信息。 其中内存 是分页的，也就是他在 类似于...
js分页实现，前端实现
qq_43682438的博客
11-13 9731
js分页实现，前端实现
jquery 页面分页的实现
weixin_30708329的博客
11-17 303
<!DOCTYPE html> <html> <head> <title>分页</title> <link rel="stylesheet" type="text/css" href="./css/page.css"></style> <script type="te...
jquery、js与jsp实现分页、全选、级联互动、自定义属性、json、rowspan
yongzhian的专栏
06-25 1634
1、分页
js jquery实现table假分页
08-09
在JavaScript和jQuery的世界里，"js jquery实现table假分页"是一个常见的需求，尤其是在处理大量数据展示时。分页能够帮助优化用户体验，避免一次性加载过多数据导致页面响应变慢。假分页，又称为模拟分页，是通过...
基于Jquery实现表格动态分页实现代码共7页.pdf.z
11-25
以上就是使用jQuery实现表格动态分页的基本流程。实际应用中，可能还需要考虑错误处理、无数据时的展示、优化性能（例如使用懒加载）等问题。记得在开发过程中，确保与后端接口的协调一致，以实现完整的数据交换。 ...
Jquery简单分页实现方法
10-23
jQuery 是一个广泛使用的 JavaScript 库，它提供了许多方便的API来简化DOM操作，因此使用jQuery实现分页也变得相对简单。本篇文章将详细介绍如何使用jQuery实现一个简单的分页功能。 首先，我们需要理解分页的基本...
jQuery实现的分页功能示例
10-20
jQuery作为一个轻量级的JavaScript库，提供了方便快捷的方式来实现这一功能。在这个示例中，我们将深入探讨如何利用jQuery和相关的CSS样式以及JavaScript脚本来创建一个实用的分页功能。 首先，我们来看HTML结构。...
一步步编写操作系统 38 一级页表与虚拟地址3
sinolover的专栏
07-03 1657
接上，页是地址空间的计量单位，并不是专属物理地址或线性地址，只要是4KB的地址空间都可以称为一页，所以线性地址的一页也要对应物理地址的一页。一页大小为4KB，这样一来，4GB地址空间被划分成4GB/4KB=1M个页，也就是4GB空间中可以容纳1048576个页，页表中自然也要有1048576个页表项，这就是我们要说的一级页表。一级页表如图: 这是一级页表模型，由于页大小是4KB，所以页表项中...
JQuery实现前端分页
u011402129的博客
01-25 1299
<!doctype html> <html> <head> <meta charset='utf-8'> <style type="text/css"> a { text-decoration: none; } .table2 { border: #C8C8C8 solid; border-width: 1px
网页中实现分页功能的几种方法
二二②四的小窝
02-10 3万+
当我们在做一些类似于贴吧展示帖子这种项目的时候，由于帖子的数量比较多，就会用到分页的技术。这里我将介绍几种几种方式来实现分页的技术。首先我们先来了解一下分页功能的核心技术点：1.       首先先规定每一页显示多少张贴子数，这样才能计算总共有多少页。2.       然后再从数据库中提取相关数量的记录，将这些提取出来的记录显示在页面上。a.      从数据库中提取有限的记录时，我们用到的sql...
jQuery实现简单分页
农夫旁有山泉的博客
02-02 2万+
现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈） 今天发布一个前端超简单的分页效果,纯jQ！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上 最简单的分页 ul.pagination { display: inline-block;
JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)
weixin_33737774的博客
10-25 7051
    在开发过程中，经常做的一件事，也是最基本的事，就是从数据库中查询数据，然后在客户端显示出来。当数据少时，可以在一个页面内显示完成。然而，如果查询记录是几百条、上千条呢？直接一个页面显示完全的话，表格得多长啊。。。。。。这时，我们可以用分页技术。     何为分页？效果图如下：           这里总共查询了100条记录，如果一次性显示的话表格会很多行，用户体验不佳。而我们采用分页显示的...
jquery通过隐藏显示实现分页
houdonghui1987的专栏
03-18 307
[code="java"]var fenzu="fenzu_"; var zu = 1; function nextFenzu(){ for(var i=1;i5){//最后一组了。 $("#fenzu_5").show();//直接写死最后一组吧！ zu = 5; alert("提交"); }else{ fenzu = "fenzu_"...
js分页实现，前端实现。
热门推荐
liuzijiang1123的专栏
01-05 4万+
主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格 的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt
开发教程文档.docx
最新发布
08-14
1. Java简介 Java是一门由Sun Microsystems公司于1995年推出的高级编程语言。它具有跨平台的特性，能够在多种操作系统（如Windows、Mac OS和各种Unix版本）上运行。Java的最大特点是“一次编写，到处运行”，这得益于Java虚拟机（JVM）的存在。 2. 环境搭建 在开始Java编程之前，需要先搭建开发环境。你需要安装Java开发工具包（JDK）和一个集成开发环境（IDE），比如IntelliJ IDEA或Eclipse。JDK是Java开发的核心，包括了编译器和标准类库，而IDE则为你提供了一个方便的开发界面。 3. 基本语法 学习Java的第一步是掌握它的基本语法。你需要了解如何定义变量、使用基本数据类型、控制程序流程（如条件语句和循环语句）以及如何定义和使用函数。这些基础知识是编写任何Java程序的基础。 java public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
08-14
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
Struts2.1.6+jQuery Flexigrid 实现JSON分页与Ajax交互
本文档主要介绍了如何在Struts2.1.6框架下结合Spring、Hibernate、jQuery、Flexigrid、Thickbox和MySQL技术实现动态数据分页显示。以下是详细步骤和关键知识点： 1. **技术栈组合**: - Struts2.1.6: 作为Web MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值