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

159 阅读 0 评论 105 点赞

我是靠谱客的博主活力芹菜，最近开发中收集的这篇文章主要介绍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 + "页."); 
}; 


[html] view plaincopy在CODE上查看代码片派生到我的代码片 

<!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> 