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(来自ibm)
Nov 10 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
详解Vue中组件的缓存
Apr 20 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
从原生JavaScript到React深入理解
Jul 23 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
javascript引用对象的方法
2007/01/11 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
小程序实现带年月选取效果的日历
2018/06/27 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python绘制动态曲线教程
2020/02/24 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
2014年会策划方案
2014/05/11 职场文书
房展策划方案
2014/06/07 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis