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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 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中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python中正则表达式的使用详解
2014/10/17 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python进行参数传递的方法
2020/05/12 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
东方电视购物:东方CJ
2016/10/12 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
优秀党员获奖感言
2014/02/18 职场文书
政风行风整改报告
2014/11/06 职场文书
公司酒会主持词
2015/07/02 职场文书
话题作文之自信作文
2019/11/15 职场文书