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


Posted in Javascript onDecember 10, 2013
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>
Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解通过JSON数据使用VUE.JS
May 26 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
jquery动态加载select下拉框示例代码
Dec 10 #Javascript
关于jquery中全局函数each使用介绍
Dec 10 #Javascript
jquery对ajax的支持介绍
Dec 10 #Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 #Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 #Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 #Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 #Javascript
You might like
PHP 解决session死锁的方法
2013/06/20 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javascript引用对象的方法
2007/01/11 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
python多重继承实例
2014/10/11 Python
详解Python中for循环的使用方法
2015/05/14 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
大学同学聚会感言
2015/07/30 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书