非常简单的JS分页效果

最新推荐文章于 2022-11-28 00:44:04 发布
最新推荐文章于 2022-11-28 00:44:04 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dats0407/article/details/17171687
版权 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Test js</title>  
</head>  

<style>
.page_num{
	width: 30px;
	height: 10px;
	padding: 5px;
	border: 2px solid #CCCCCC;
}
.page_wrapper{
	margin-top: 20px;
}
.current_page{
	background: #CCCCCC;
}
</style>
<body>  
<div > 
<table width="200" border="1" id="store">
  <tr bgcolor="#CCCCCC">  
    <td>name</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
    <td>good</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>better</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>best</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>bad</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>worse</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>worst</td>  
    <td> </td>  
    <td> </td>  
  </tr>

  </tr>  
    <td>good</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>better</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>best</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>bad</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>worse</td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td>worst</td>  
    <td> </td>  
    <td> </td>  
  </tr>

</table>  
  <div id="store_page" class="page_wrapper"></div>
 
</body>
<script type="text/javascript">
var option = {
	"hastitle": true,//has title or not
	"num": 5,//list row number
	"id": "store",//the table's id
	"page_id": "store_page"//the number page wrapper
};
var storeId = document.getElementById(option.id);//get the table
var rowsLength = storeId.rows.length;// the table all row length
var current_page = 1;// the default page
var page_num = option.num;

var searchText = [];//store all rows
var n = 0;
var titleHtml = "";//store the title row's html ,if it has
if(option.hastitle){//has title, leave out the title row
	titleHtml = storeId.rows[0].outerHTML;
	for(var i=1;i<rowsLength;i++){
		searchText[n] = storeId.rows[i].outerHTML
		n++;
	}
}else{
	for(var i=0;i<rowsLength;i++){
		searchText[n] = storeId.rows[i].outerHTML
		n++;
	}
}
//begin the default show
changePage(current_page);

//change the page num
function changePage(current_page){
	changeContent(current_page);
	var page_store = document.getElementById(option.page_id);
	page_store.innerHTML = "";
	for(var p=1;p<=Math.ceil(searchText.length/page_num);p++){
		//put the onclick event into the num block
		if(current_page == p){
			page_store.innerHTML += "<span class='page_num current_page' οnclick='changePage(this.innerHTML)'>"+ p +"</span>";
		}else{
			page_store.innerHTML += "<span class='page_num' οnclick='changePage(this.innerHTML)'>"+ p +"</span>";
		}
		
	}
}
//turn the page to select page
function changeContent(current_page){
	var c_html = '';
	var c_page_sum = (current_page*page_num)>searchText.length ? searchText.length : (current_page*page_num);
	for(var m=((current_page-1)*page_num);m<c_page_sum;m++){
		c_html += searchText[m];
	}

	var storeId = document.getElementById(option.id);
	storeId.innerHTML = ""
	storeId.innerHTML = titleHtml+c_html;
}  
</script>
</html>


Marx-link
关注
专栏目录
用js实现页面分页效果
04-14
1.用js控制页面上的数据，实现分页效果， 2.可以对每一列进行排序 3.还可以控制页面以几行数据进行分页
JS分页效果JS分页效果
07-27
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Copyright" content="懒人图库 http://www.makewing.com/" /> <meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" /> <meta content="懒人图库" name="keywords" /> <title>懒人图库</title> <style> body {font-size: 12px;} /* Pages Main Tyle */ .pages { color: #000000; cursor: default; font-size: 10px; font-family: Tahoma, Verdana; padding: 3px 0px 3px 0px; } .pages .count, .pages .number, .pages .arrow { color: #000000; font-size: 10px; background-color: #F7F7F7; border: 1px solid #CCCCCC; } /* Page and PageCount Style */ .pages .count { font-weight: bold; border-right: none; padding: 2px 10px 1px 10px; } /* Mode 0,1,2 Style (Number) */ .pages .number { font-weight: normal; padding: 2px 10px 1px 10px; } .pages .number a, .pages .number span { font-size: 10px; } .pages .number span { color: #999999; margin: 0px 3px 0px 3px; } .pages .number a { color: #000000; text-decoration: none; } .pages .number a:hover { color: #0000ff; } /* Mode 3 Style (Arrow) */ .pages .arrow { font-weight: normal; padding: 0px 5px 0px 5px; } .pages .arrow a, .pages .arrow span { font-size: 10px; font-family: Webdings; } .pages .arrow span { color: #999999; margin: 0px 5px 0px 5px; } .pages .arrow a { color: #000000; text-decoration: none; } .pages .arrow a:hover { color: #0000ff; } /* Mode 4 Style (Select) */ .pages select, .pages input { color: #000000; font-size: 10px; font-family: Tahoma, Verdana; } /* Mode 5 Style (Input) */ .pages .input input.ititle, .pages .input input.itext, .pages .input input.icount { color: #666666; font-weight: bold; background-color: #F7F7F7; border: 1px solid #CCCCCC; } .pages .input input.ititle { width: 70px; text-align: right; border-right: none; } .pages .input input.itext { width: 25px; color: #000000; text-align: right; border-left: none; border-right: none; } .pages .input input.icount { width: 35px; text-align: left; border-left: none; } .pages .input input.ibutton { height: 17px; color: #FFFFFF; font-weight: bold; font-family: Verdana; background-color: #999999; border: 1px solid #666666; padding: 0px 0px 2px 1px; margin-left: 2px; cursor: hand; } </style> <script language="JavaScript"> <!-- /* showPages v1.1 ================================= Infomation ---------------------- Author : Lapuasi E-Mail : lapuasi@gmail.com Web : http://www.lapuasi.com Date : 2005-11-17 Example ---------------------- var pg = new showPages('pg'); pg.pageCount = 12; //定义总页数(必要) pg.argName = 'p'; //定义参数名(可选,缺省为page) pg.printHtml(); //显示页数 Supported in Internet Explorer, Mozilla Firefox */ function showPages(name) { //初始化属性 this.name = name; //对象名称 this.page = 1; //当前页数 this.pageCount = 1; //总页数 this.argName = 'page'; //参数名 this.showTimes = 1; //打印次数 } showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个 var args = location.search; var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi'); var chk = args.match(reg); this.page = RegExp.$1; } showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证 if (isNaN(parseInt(this.page))) this.page = 1; if (isNaN(parseInt(this.pageCount))) this.pageCount = 1; if (this.page < 1) this.page = 1; if (this.pageCount < 1) this.pageCount = 1; if (this.page > this.pageCount) this.page = this.pageCount; this.page = parseInt(this.page); this.pageCount = parseInt(this.pageCount); } showPages.prototype.createHtml = function(mode){ //生成html代码 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1; if (mode == '' || typeof(mode) == 'undefined') mode = 0; switch (mode) { case 0 : //模式1 (页数,首页,前页,后页,尾页) strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; strHtml += '<span class="number">'; if (prevPage < 1) { strHtml += '<span title="First Page">?</span>'; strHtml += '<span title="Prev Page">?</span>'; } else { strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">?</a></span>'; strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">?</a></span>'; } for (var i = 1; i <= this.pageCount; i++) { if (i > 0) { if (i == this.page) { strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; } else { strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; } } } if (nextPage > this.pageCount) { strHtml += '<span title="Next Page">?</span>'; strHtml += '<span title="Last Page">?</span>'; } else { strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">?</a></span>'; strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">?</a></span>'; } strHtml += '</span><br />'; break; case 1 : //模式1 (10页缩略,首页,前页,后页,尾页) strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; strHtml += '<span class="number">'; if (prevPage < 1) { strHtml += '<span title="First Page">?</span>'; strHtml += '<span title="Prev Page">?</span>'; } else { strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">?</a></span>'; strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">?</a></span>'; } if (this.page % 10 ==0) { var startPage = this.page - 9; } else { var startPage = this.page - this.page % 10 + 1; } if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>'; for (var i = startPage; i < startPage + 10; i++) { if (i > this.pageCount) break; if (i == this.page) { strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; } else { strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; } } if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>'; if (nextPage > this.pageCount) { strHtml += '<span title="Next Page">?</span>'; strHtml += '<span title="Last Page">?</span>'; } else { strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">?</a></span>'; strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">?</a></span>'; } strHtml += '</span><br />'; break; case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页) strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; strHtml += '<span class="number">'; if (prevPage < 1) { strHtml += '<span title="First Page">?</span>'; strHtml += '<span title="Prev Page">?</span>'; } else { strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">?</a></span>'; strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">?</a></span>'; } if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>'; if (this.page >= 5) strHtml += '<span>...</span>'; if (this.pageCount > this.page + 2) { var endPage = this.page + 2; } else { var endPage = this.pageCount; } for (var i = this.page - 2; i <= endPage; i++) { if (i > 0) { if (i == this.page) { strHtml += '<span title="Page ' + i + '">[' + i + ']</span>'; } else { if (i != 1 && i != this.pageCount) { strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>'; } } } } if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>'; if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>'; if (nextPage > this.pageCount) { strHtml += '<span title="Next Page">?</span>'; strHtml += '<span title="Last Page">?</span>'; } else { strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">?</a></span>'; strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">?</a></span>'; } strHtml += '</span><br />'; break; case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE) strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>'; strHtml += '<span class="arrow">'; if (prevPage < 1) { strHtml += '<span title="First Page">9</span>'; strHtml += '<span title="Prev Page">7</span>'; } else { strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>'; strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>'; } if (nextPage > this.pageCount) { strHtml += '<span title="Next Page">8</span>'; strHtml += '<span title="Last Page">:</span>'; } else { strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>'; strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>'; } strHtml += '</span><br />'; break; case 4 : //模式4 (下拉框) if (this.pageCount < 1) { strHtml += '<select name="toPage" disabled>'; strHtml += '<option value="0">No Pages</option>'; } else { var chkSelect; strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">'; for (var i = 1; i <= this.pageCount; i++) { if (this.page == i) chkSelect=' selected="selected"'; else chkSelect=''; strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>'; } } strHtml += '</select>'; break; case 5 : //模式5 (输入框) strHtml += '<span class="input">'; if (this.pageCount < 1) { strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">'; strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>'; } else { strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">'; strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">'; strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">'; strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);"></option>'; } strHtml += '</span>'; break; default : strHtml = 'Javascript showPage Error: not find mode ' + mode; break; } return strHtml; } showPages.prototype.createUrl = function (page) { //生成页面跳转url if (isNaN(parseInt(page))) page = 1; if (page < 1) page = 1; if (page > this.pageCount) page = this.pageCount; var url = location.protocol + '//' + location.host + location.pathname; var args = location.search; var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi'); args = args.replace(reg,'$1'); if (args == '' || args == null) { args += '?' + this.argName + '=' + page; } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') { args += this.argName + '=' + page; } else { args += '&' + this.argName + '=' + page; } return url + args; } showPages.prototype.toPage = function(page){ //页面跳转 var turnTo = 1; if (typeof(page) == 'object') { turnTo = page.options[page.selectedIndex].value; } else { turnTo = page; } self.location.href = this.createUrl(turnTo); } showPages.prototype.printHtml = function(mode){ //显示html代码 this.getPage(); this.checkPages(); this.showTimes += 1; document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>'); document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode); } showPages.prototype.formatInputPage = function(e){ //限定输入页数格式 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false; if(!ie) var key = e.which; else var key = event.keyCode; if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true; return false; } //--> </script> </head> <body> <p> <script language="JavaScript"> <!-- var pg = new showPages('pg'); pg.pageCount =12; // 定义总页数(必要) //pg.argName = 'p'; // 定义参数名(可选,默认为page) document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default'); pg.printHtml(); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0'); pg.printHtml(0); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1'); pg.printHtml(1); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2'); pg.printHtml(2); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)'); pg.printHtml(3); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4'); pg.printHtml(4); document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5'); pg.printHtml(5); //--> </script> </p> <p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body> </html>
一个JS分页效果代码
vip_linux的专栏
04-30 3597
这里分享一个不错的js分页代码。 代码中cpage是页面计数，应为全局变量，可以随处调用它； totalpage是总页数。 与asp分页代码很类似，也是先取得记录总数，然后实现分页，基本的分页思路与原理还是相通的，感兴趣的朋友做个参考吧。 例子，js分页效果代码。       JS静态分页程序--www.jbxue.com      a:link,a:visi
js分页效果
Think More 的博客
05-18 1137
无标题文档 a { margin: 5px; } window.onload = function() { //执行函数 page({ id : 'div1', nowNum : 7, allNum : 10, callBack : function(now, all) { //回调函
vue.js 2.0实现简单分页效果
10-16
在本文中，我们将详细介绍如何使用Vue.js 2.0实现一个简单的分页效果。通过阅读本文，您将学会如何在网页中加入分页功能，以及如何利用Vue.js进行数据绑定和事件处理来实现分页逻辑。 首先，页面的基本结构是通过...
非常不错的一个JS分页效果代码，值得研究
10-30
本文将深入分析一段优秀的JavaScript分页效果代码，并探讨其背后的实现原理以及应用场景。 #### 二、代码概述 根据提供的描述，“非常不错的一个JS分页效果代码，值得研究”，这段代码主要实现了简单的静态分页功能...
原生javascript实现分页效果
10-19
本文将详细介绍如何使用原生JavaScript实现分页效果，这种方法不依赖于任何第三方框架，仅使用纯JavaScript代码来完成分页逻辑和UI的构建。 首先，了解分页实现的基本原理是必要的。分页通常涉及到以下几个核心部分...
js实现简单分页导航栏效果
10-16
在这篇文章中，我们将深入探讨使用JavaScript实现简单分页导航栏效果的技术细节和实现方法。分页功能是在Web开发中常见的需求，尤其是当数据量较大时，将数据分批次加载能够有效提升用户体验，并减轻服务器压力。...
JS分页效果JS分页效果JS分页效果
07-13
直接将HTML文件和CSS文件放在同一目录点击即可查看效果
漂亮的js分页效果
06-29
漂亮的js分页效果，模仿淘宝的分页，超漂亮
js分页效果,很简单,很实用
05-28
这是个人写的js分页效果,很实用，也很简单，大家粘过去就完了。项目中可以引用哦。只有一个html文档，一看就明白了哈。呵呵！！想和大家一起分享学习中的点点滴滴!!
JS代码实现的自动分页效果
08-18
JS代码实现的自动分页效果,JS代码实现的自动分页效果,JS代码实现的自动分页效果
js css自定义分页效果
12-01
网上看了好多分页插件都不太满意，所以根据网上的一些东西自己做了一个，可以搭配mvc和数据库 效果图片 先来css（样式不喜欢的话可以不用这个） .pagelist {padding:10px 0; text-align:center;} .pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;} .pagelist a{ margin:0 3px;} .pagelist span.current{ background:#0
【学习笔记45】JavaScript的分页效果
最新发布
yizhiyang
11-28 429
JavaScript的分页效果
简单js分页效果
ChocooM
12-17 322
写了这个js让我彻底喜欢上全局变量，在这个例子中所有的内容都是在页面中，不是用ajax调的，但是和用ajax调的思路是一摸一样的，在这里我先把内容都存在一个数组中，然后再根据实际选择哪页再调取具体数组的内容： [code="js"]var li=this.oID.getElementsByTagName("li"); var nub=0; var io=[]; for(va...
JS实现分页功能
热门推荐
RockHan
10-28 4万+
为了方便浏览通常将服务器响应回来的大量数据做分页 从实现方式上来说分页基本分为两种方式： 1.查询所有数据返回给客户，通过显示指定区间实现分页，这种方法一般是指JS分页 2.通过客户发送的请求，构造sql语句，查询表中的一段数据。 --------------------------------------------------------------------------------...
原生JavaScript详述分页效果与示例
本文将详细介绍如何使用原生JavaScript实现分页效果，通过一个具体的代码示例来展示其实现过程。首先，我们创建一个名为`pageNation`的自执行函数，这个函数内部包含两个关键部分：一个`extend`方法用于对象的继承，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值