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中valueOf函数与toString方法深入理解
Dec 02 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python下rrdtool模块的基本使用方法
2015/11/13 Python
numpy排序与集合运算用法示例
2017/12/15 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python主线程捕获子线程的方法
2018/06/17 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
python操作gitlab API过程解析
2019/12/27 Python
python实现三壶谜题的示例详解
2020/11/02 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
幼师自荐信范文
2013/10/06 职场文书
个人贷款担保书
2014/04/01 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python