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 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
angular select 默认值设置方法
Jun 23 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 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中foreach的用法和实例
2016/10/25 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python enumerate函数的使用方法总结
2017/11/15 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python实现四人制扑克牌游戏
2020/04/22 Python
如何在pycharm中安装第三方包
2020/10/27 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
一个都不能少观后感
2015/06/04 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python常遇到的错误和异常
2021/11/02 Python
Python Django项目和应用的创建详解
2021/11/27 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python