JQuery实现页面的表格数据的增加与分页

最新推荐文章于 2022-10-13 11:13:24 发布
最新推荐文章于 2022-10-13 11:13:24 发布
阅读量155 收藏
点赞数
文章标签： javascript ViewUI 
var countPage;
var nowPag = 1;
var pageSize;
var countSize;

var starIndex;
var endIndex;

// 用户提交信息
var name;
var sex;
var age;

// 定义行号
var num = 1;

$(document).ready(function() {
	// 注册添加用户的事件
	$("#submit").click(function() {
		// 获取用户提交的信息
		name = $("#name").val();
		sex = $("input[name='sex']:checked").val();
		age = $("#age").val();
		pageSize = $("#selectSize option:selected").val();
		// alert(name+sex+age+pageSize);

		// 创建表格下的tr对象
		$tr = $("<tr class='data' ></tr>");
		$td1 = $("<td></td>");
		$td2 = $("<td></td>");
		$td3 = $("<td></td>");
		$td4 = $("<td></td>");
		$td5 = $("<td></td>");

		$tr.append($td1.append("<input type='checkbox'>"));
		$tr.append($td2.append(name));
		$tr.append($td3.append(sex));
		$tr.append($td4.append(age));
		$tr.append($td5.append("<input type='button' value='删除'>"));

		$("#show").append($tr);
		pageNation();

	});
	// 注册选择显示条数的操作
	$("#selectSize").change(function() {
		pageSize = $("#selectSize option:selected").val();
		pageNation();
	});

	// 注册分页操作的按钮点击事件
	$("#first").click(pageNation);
	$("#back").click(pageNation);
	$("#next").click(pageNation);
	$("#last").click(pageNation);

});

// 分页操作的函数
var pageNation = function() {
	// 获取所有的数据条数
	countSize = $("#show tr").size();
	// 获取总页数
	countPage = Math.ceil(countSize / pageSize);

	// 处理翻页的操作
	if (this.nodeType == 1) {
		var idValue = $(this).attr("id");
		if ("first" == idValue) {
			// alert(idValue);
			nowPag = 1;
		} else if ("back" == idValue) {
			// alert(nowPag);
			if (nowPag > 1) {
				nowPag--;
			}

		} else if ("next" == idValue) {
			// alert(idValue);
			if (nowPag < countPage) {
				nowPag++;
			}
		} else if ("last" == idValue) {
			// alert(idValue);
			nowPag = countPage;
		}

	}
	// alert(pageSize);
	// 获取显示开始和结束的下标
	starIndex = (nowPag - 1) * pageSize + 1;
	endIndex = nowPag * pageSize;

	if (endIndex > countSize) {
		// alert("下标大于总记录数"+endIndex);
		endIndex = countSize;
	}

	if (countSize < pageSize) {
		// alert("总记录数小小于每页的显示条数"+endIndex);
		endIndex = countSize;
	}

	// alert(starIndex);

	if (starIndex == endIndex) {
		// 显示的操作
		$("#show tr:eq(" + (starIndex - 1) + ")").show();
		$("#show tr:lt(" + (starIndex - 1) + ")").hide();
	} else {
		// 显示的操作
		$("#show tr:gt(" + (starIndex - 1) + ")").show();
		$("#show tr:lt(" + (endIndex - 1) + ")").show();

		// 隐藏的操作
		$("#show tr:lt(" + (starIndex - 1) + ")").hide();
		$("#show tr:gt(" + (endIndex - 1) + ")").hide();
	}
	// 改变底部显示操作
	$("#sizeInfo")
			.html(
					"当前从" + starIndex + "条到第" + endIndex + "条记录,共" + countSize
							+ "条记录.");
	$("#pageInfo").html("当前是第" + nowPag + "页,共" + countPage + "页.");
};


<!DOCTYPE html>
<html>
<head>
<title>用jquery实现</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div {
	border: 1px black solid;
}

#tableDiv {
	height: 500px;
}

#insertDiv {
	width: 300px;
	margin-right: 550px;
}

#tableDiv {
	width: 500px;
	margin-left: 350px;
}

#top {
	width: 500px;
	height: 400px;
}

#topTable,#contentTable,#bottomTable {
	width: 450px;
}
</style>


<script type="text/javascript" src="../js/jqueryTablePageNation.js"></script>
</head>

<body>
	<div id="content" align="center">
		<form action="">

			<div id="insertDiv" style="width: 263px; ">
				<table id="insertData" border="1px">
					<tr>
						<td>姓名<input type="text" id="name" value="donghogyu"></td>
					</tr>
					<tr>
						<td>性别<input type="radio" name="sex" value="男"
							checked="checked">男<input type="radio" name="sex"
							value="女">女
						</td>

					</tr>
					<tr>
						<td>年龄<input type="text" id="age" value="21"></td>
					</tr>
					<tr>
						<td align="center"><input type="button" id="submit"
							value="添加数据"></td>
					</tr>
				</table>
			</div>

			<div id="tableDiv">
				<div id="top">
					<table id="topTable" border="1px">
						<thead>

							<th><input type="checkbox">全选</th>
							<th>姓名</th>
							<th>性别</th>
							<th>密码</th>
							<th>操作</th>

						</thead>
						<tbody id="show">
							
						</tbody>
					</table>
				</div>

				<div id="bottom">
					<table id="bottomTable" border="1px">
						<tr align="center">
							<td><input type="button" value="首页" id="first"></td>
							<td><input type="button" value="上一页" id="back"></td>
							<td><input type="button" value="下一页" id="next"></td>
							<td><input type="button" value="末页" id="last"></td>
							<td><select id="selectSize">
									<option value="3">3</option>
									<option value="5">5</option>
									<option value="10">10</option>
							</select>条</td>
						</tr>
						<tr align="center">
							<td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>
						</tr>
						<tr align="center">
							<td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>
						</tr>
					</table>

				</div>
			</div>


		</form>
	</div>
</body>
</html>

宇众不同_2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery之动态为表格添加数据
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
使用jquery实现表格动态分页
02-04
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。
运用jquery实现表格分页
weixin_30399871的博客
06-16 87
该方法的运用是从后台数据库中一次性取出所有的数据，运用Jquery把一部分数据隐藏起来，事实上数据还是全部在html页面中，具体代码如下： 引用js和css文件有： <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"><script type="text/javascript" sr...
jq实现html分页代码,基于Jquery实现表格动态分页实现代码
weixin_29041767的博客
06-10 721
当页面点击分页图标时，程序会自动去后台获取对应页数的记录。关键代码如下：需要引入的css和js文件有：其中jsp页面代码如下：var pageIndex = 1; //当前页数$(function(){GetPageCount();//获取分页数量以及总的记录条数$("#load").hide();//隐藏loading提示$("#template").hide();//隐藏模板ChangeSta...
jQuery TABLE 分页
代码笔记
09-14 542
jQuery TABLE 分页
JQuery页面的表格数据的增加与分页的实现
12-10
代码如下: var countPage; var nowPag = 1; var pageSize; var countSize; var starIndex; var endIndex; // 用户提交信息 var name; var sex; var age; // 定义行号 var num = 1; $(document).ready(function() { /...
基于jquery实现的表格分页实现代码
10-28
该方法的运用是从后台数据库中一次性取出所有的数据，运用Jquery把一部分数据隐藏起来，事实上数据还是全部在html页面中
jquery.pagination.js 无刷新分页实现步骤分享
01-19
1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发个。 首先引用 jquery.pagination.js （分页js），跟pagination.css... //Load事件，初始化表格数据，页面索引为0（第一页） //分页，Pag
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
qq_35727582的博客
10-13 1862
记录并分享一下基于 jQuery 和 bootstrap 封装的一个简单分页表格组件，希望对你有用
使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏
06-18
使用jquery，动态生成table表格，使用jquery.pagination.js来实现分页栏
Jquery dataTable完整例子（取数据、分页、样式等）
09-21
分页、排序、检索 Datatable与json之间数据转换，一个详细完整的例子！，希望对大家有用。
ajax 静态网页操作表格分页哦
03-10
静态网页操作表格分页哦，有兴趣的可以参考一下哦
jQuery带分页动态数据表格插件
04-27
jQuery带分页动态数据表格插件 jQuery带分页动态数据表格插件
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。
06-23
利用jquery实现表格动态分页。前台用jquery实现；后台用java实现动态查询数据、分页。 表格数据的总记录数，每页条数，总页数，上/下一页，首页，末页等基本功能元素都有相应的函数实现，可作为基本分页功能的学习。 缺点：css文件涉及的图片是缺失的，用户可自行寻找图片代替。
jquery：使用按钮对table实现分页
aet26399的博客
11-22 108
JS代码： var pageSize = 10;//每页显示的记录条数var curPage=0;var lastPage;var direct=0;var len;var page;$(document).ready(function(){ len =$("#table tr").length; page=len % pageSize==0 ...
jquery表格数据分页的插件实现
仰望星空，脚踏实地
02-07 1404
闲来无事，自制了一个jquey表格数据分页的插件，使用了bootstrap的表格和分页样式，能将ajax查询得到的数据集合显示在表格中并实现分页功能。你只需调用jquery函数:$("#mytable").datagrid(json);即可实现。本插件需先引入bootstrap样式和jquery.js。附上效果图和源码：                          
利用jQuery给表格添加分页效果
ChauncyWu的博客
03-01 4699
1. 新建一个Table，添加十行数据 编号 姓名 性别 1 张飞 男 2 刘备 男 3 关羽 男 4 妲己
前端jquery表格分页效果函数分装（jquery表格行显示隐藏变形问题）
圆野的博客
07-26 1215
标题 html代码如下： <div> <span class="spanFirst">第一页</span> <span class="spanPre">上一页</span> 第<span class="spanPageNum"></span>页/ 共<span class="spanTotalP...
html页面异步请求，如何实现datatable表格分页功能，从servlet获取数据。仅提供html页面代码
最新发布
05-31
好的，以下是一个简单的示例代码，实现了从servlet获取数据并使用datatable插件实现表格分页： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DataTable分页示例</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "servletName", "columns": [ { "data": "id" }, { "data": "name" }, { "data": "age" }, { "data": "gender" } ] }); }); </script> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> </table> </body> </html> ``` 其中，需要将`ajax`属性设置为servlet的名称，同时在servlet中实现数据获取和分页逻辑。具体实现可以参考DataTable官方文档和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值