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中的事件处理
Jan 16 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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者的疑难问答(1)
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php输入数据统一类实例
2015/02/23 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python实现梯度下降法
2020/03/24 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
公司授权委托书范本
2014/04/03 职场文书
施工安全生产承诺书
2014/05/23 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
法人授权委托书
2014/09/16 职场文书
不同意离婚答辩状
2015/05/22 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle