js加强的经典分页实例


Posted in Javascript onMarch 15, 2013

1显示的页面:

<!DOCTYPE html>
< html>
<head>
<title>js_pageusers.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/pageuser.js"></script>
</head>
<body>
<div id="one" align="center">
<div>
用户名:
<input type="text" id="userName" />
性别:
<input type="text" id="userSex" />
职业:
<input type="text" id="userRole" />
<br />
<br />
<input type="button" id="addUsers" value="添加用户" />
<input type="button" id="updateUsers" value="更新用户" />
</div>
<br />
<br />
<div>
<table border="1px" cellpadding="0" cellspacing="0" width="500px;">
<thead>
<th>
用户名
</th>
<th>
性别
</th>
<th>
职业
</th>
</thead>

<tbody id="showUsers"></tbody>
</table>
<div>
<input type="button" id="firstPage" value="首页"/>
<input type="button" id="backPage" value="上一页"/>
<input type="button" id="nextPage" value="下一页"/>
<input type="button" id="lastPage" value="末页"/>
<span id="msg"></span>
</div>
</div>

</div>
</body>
</html>

2.

window.onload =function(){
var pagesize = 3;//每页显示的记录数
var recondsize = 0;//总记录数
var countpage = 0;//总页数
var nowpage= 1;
var users = new Array();//存放所有的记录
var start = 0; //保存当前页开始的记录
var end = 0 ;//保存当前页结束的记录
var domUserName = $("userName");
var domUserSex = $("userSex");
var domUserRole = $("userRole");
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
//为按钮注册事件
addBtn.onclick = function() {
//创建user对象
var user = new User(domUserName.value, domUserSex.value,
domUserRole.value);
//把user对象存放数组中
users.push(user);
recondsize = users.length; //得出总记录数
//计算出总页数
countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);
if (recondsize > pagesize) { //当总记录大于pagezie 思路 从后往前数3个数
start = recondsize-pagesize;
end=recondsize;
}else{ // pagesize start =1;
start=0;
end=recondsize; //end=实际的个数 就是 recondsize
}
 //调用显示user的方法
 showUser(users,start,end,recondsize,countpage,domshowUsers);
}
 //获取分页相关的按钮
var firstPage = $("firstPage");
var backPage = $("backPage");
var nextPage = $("nextPage");
var lastPage = $("lastPage");
firstPage.onclick = function() {
nowpage = 1;
if (recondsize<= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=0;
end=pagesize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}

backPage.onclick = function() {
nowpage = nowpage-1;//重新赋值
if(nowpage<=1){
nowpage=1;
}
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=(nowpage-1)*pagesize;
end = (nowpage-1)*pagesize+pagesize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
nextPage.onclick = function() {
nowpage = nowpage+1;//重新赋值
if(nowpage>=countpage){
nowpage=countpage;
}
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=(nowpage-1)*pagesize;
if((nowpage-1)*pagesize+pagesize>=recondsize){
 end = recondsize;
}else{
end =(nowpage-1)*pagesize+pagesize;
}
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
lastPage.onclick = function() {
nowpage = countpage;//重新赋值
if (recondsize <= pagesize && recondsize > 0) {
start = 0;
end = recondsize;
}else{ 
 start=(nowpage-1)*pagesize;
 end = recondsize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
} 
//创建一个Function函数 函数是保存User对象数据的
function User(name, sex, role) {
this.name = name;
this.sex = sex;
this.role = role;
}
function $(id) {
return document.getElementById(id);
}
function showUser(users,start,end,recondsize,countpage,domshowUsers){
//清空数据
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}
 //for循环添加的
 for(var i=start;i<end;i++){
 var user = users[i];//考虑
 //创建一行
var tr = document.createElement("tr");
//创建列
var td1 = document.createElement("td");
//创建文本节点
var td1TextNode = document.createTextNode(user.name);
//文本节点添加到td中
td1.appendChild(td1TextNode);
//创建列
var td2 = document.createElement("td");
//创建文本节点
var td2TextNode = document.createTextNode(user.sex);
//文本节点添加到td中
td2.appendChild(td2TextNode);
//创建列
var td3 = document.createElement("td");
//创建文本节点
var td3TextNode = document.createTextNode(user.role);
//文本节点添加到td中
td3.appendChild(td3TextNode);
//把列添加到行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//把行添加到tbody中
if(domshowUsers.hasChildNodes()){
domshowUsers.insertBefore(tr,domshowUsers.firstChild);//再最后一个数据之前添加数据
}else{
 domshowUsers.appendChild(tr);//添加到末尾
}
}
 document.getElementById("msg").innerHTML = "总共:{" + recondsize
+ "}条记录,共{" + countpage + "}页";
}
Javascript 相关文章推荐
JavaScript中出现乱码的处理心得
Dec 24 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 #Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 #Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
You might like
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python在线运行代码助手
2016/07/15 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python 如何提高元组的可读性
2019/08/26 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
甲方资料员岗位职责
2013/12/13 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
五年级语文教学反思
2016/03/03 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis