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 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
深入浅析React中diff算法
May 19 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实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
js表格分页实现代码
2009/09/18 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python 高级专用类方法的实例详解
2017/09/11 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python super()函数的基本使用
2020/09/10 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
介绍一下grep命令的使用
2012/06/28 面试题
一套Delphi的笔试题一
2016/02/14 面试题
致1500米运动员广播稿
2014/02/07 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
电子商务专业求职信
2014/07/10 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
春晚观后感
2015/06/11 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
JS实现简单的九宫格抽奖
2022/06/28 Javascript