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

u011936142

浏览: 43086 次
性别:
来自: 北京

最近访客更多访客>>

luojy200

tuanz

laiy2007

lovesugar

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (83)

社区版块

存档分类

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

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>

分享到：