js加强的经典分页实例

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"> <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 + "}页";}

　　推荐阅读

　　DIV+CSS+JS不间断横向滚动实现代码

DIV+CSS+JS实现不间断横向滚动代码复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</tit>>>详细阅读

本文标题：js加强的经典分页实例

地址：http://www.17bianji.com/kaifa2/JS/22229.html

1/2 1