几种分页的实现
2012-05-14 17:28
274 查看
第一种方式：
<!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>分页工具条测试</title>
<style type="text/css">
div.pagination {
font-size:12;
font_face:arial;
font-color:#ffffff;
padding:3px;
margin:3px;
text-align:center;
}
div.pagination a {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #9aafe5;
text-decoration: none;
color:#2e6ab1;
}
div.pagination a:hover, div.pagination a:active {
border: 1pxsolid #2b66a5;
color:#000;
background-color: lightyellow;
}
div.pagination span.current {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid navy;
font-weight:bold;
background-color: #2e6ab1;
color:#FFF;
}
div.pagination span.disabled {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #929292;
color:#929292;
}
</style>
<script language="javascript">
function pagination(current,total){
var HTML="";
var separator="...";
if(total<=11){
if(total==0)return;
//生成上一页按钮
if(current==1){
HTML="<span class='disabled'>◄</span>";
}else{
HTML="<a href='#'onclick=topage("+(current-1)+")>◄</a>";
}
//生成中间按钮
HTML+=this.getMidHTML(1,total,current);
//生成下一页按钮
if(current==total){
HTML+="<span class='disabled'>►</span>";
}else{
HTML+="<a href='#'onclick=topage("+(current+1)+")>►</a>";
}
}else{
if(current-1<=5){
HTML=this.getPreHTML(current,total);
HTML+=this.getMidHTML(3,9,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}else if(total-current<=6){
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(total-8,total-2,current);
HTML+=this.getLastHTML(current,total);
}else{
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(current-3,current+3,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}
}
this.show=HTML;
}
pagination.prototype.getPreHTML=function(current,total){//生成前三个按钮，1,2和上一页按钮
var html="";
if(current==1){
html="<span class='disabled'>◄</span>";
html+="<span class='current'>1</span>";
}else{
html="<a href='#'onclick=topage("+(current-1)+")>◄</a>";
html+="<a href='#'onclick=topage(1)>1</a>";
}
if(current==2){
html+="<span class='current'>2</span>";
}else{
html+="<a href='#'onclick=topage(2)>2</a>";
}
return html;
}
pagination.prototype.getMidHTML=function(first,last,current){
var html="";
for(var i=first;i<=last;i++){
if(i==current){
html+="<span class='current'>"+current+"</span>";
}else{
html+="<a href='#'onclick=topage("+i+")>"+i+"</a>";
}
}
return html;
}
pagination.prototype.getLastHTML=function(current,total){
//生成三个按钮，最后两页和下一页按钮
var html="";//不可不初始化,否则在字符串相加时出现undefined
if(current==total-1){
html="<span class='current'>"+(total-1)+"</span>";
}else{
html="<a href='#'onclick=topage("+(total-1)+")>"+(total-1)+"</a>";
}
if(current==total){//生成最后二个按钮
html+="<span class='current'>"+total+"</span>";
html+="<span class='disabled'>►</span>";
}else{
html+="<a href='#'onclick=topage("+total+")>"+total+"</a>";
html+="<a href='#'onclick=topage("+(current+1)+")>►</a>";
}
return html;
}
function test()//测试以上代码的正确性
{
var hear=document.getElementById("page");
for (var i=1;i<=11;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
for (var i=11;i<=25;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
}
</script>
</head>
<body>
<div class="pagination" id="page"></div>
<input type="button" onclick="test()" value='生成测试分页工具条'/>
</body>
</html>
第二种方式：
<!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>无标题文档</title>
</head>
<body>
<div id="resultContent"></div>
<script type="text/javascript">
var currentPage = 1; //当前页
var pageSize = 10; //每页中显示的数据数
var totalpage = 0; //总页数
var recordCount = 1000; //假设总数据条数100
var numCount = 5; //每页显示多少个分页数字
//算出多少页
if (recordCount % pageSize == 0) {
totalpage = parseInt(recordCount / pageSize);
} else {
totalpage = parseInt(recordCount / pageSize) + 1;
}
totalpage = 11;//假设共有11页，测试用 ，用到时直接删除
if(totalpage > 1){ //需要显示分页工具栏
setpage();
}
//页数跳转函数
function gotopage(target) {
currentPage = target;
//把页面计数定位到第几页
setpage();
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
//设置页数
function setpage(){
var outstr = "";
outstr += '<div id="setpage" style="text-align:center;\
padding:16px;letter-spacing:2px;">';
if (totalpage <= numCount) //页数小于等于每页显示的分页数字
{
outstr += setPageHtml(1, totalpage);
}
if (totalpage > numCount) //页数大于每页显示的分页数字
{
if(parseInt((currentPage) / numCount) == 0)//前每页显示的分页数字
{
outstr += setPageHtml(1, numCount);
}
else //每页显示的分页数字 之后分页显示
{
//构造选中页始终在中间位置
var moiety = 0;
var begin = 0;
var end = 0;
if (numCount % 2 == 0) {
//偶数
moiety = parseInt(numCount / 2);
begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety ) > totalpage
? totalpage : (currentPage + moiety - 1));
} else {
//奇数
moiety = parseInt(numCount / 2);
begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety) > totalpage
? totalpage : (currentPage + moiety));
}
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ 1 + ")'>首页</a> "
outstr += setPageHtml(begin, end);
outstr+=" <a href='javascript:void(0)' onclick='gotopage("
+ totalpage+ ")'>尾页</a>";
}
}
outstr += '</div>' ;
document.getElementById("resultContent").innerHTML = outstr;
}
//构造页数Html
function setPageHtml(begin, end){
var outstr = "";
if (1 != currentPage) {
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ (currentPage - 1) + ")'>上一页</a>";
}
for (var i = begin; i <= end; i++) {
if (i != currentPage) {
outstr += '[<a href="javascript:void(0)" onclick="gotopage('
+ i + ')">' + i + '</a>]';
} else {
outstr += '<span>[' + i + ']<span>';
}
}
if (totalpage != currentPage) {
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ (currentPage + 1) + ")'>下一页</a>";
}
return outstr;
}
</script>
</body>
</html>
-------------------------------------------------------------------------分割线--------------------------------------------------
拷贝以上代码保存为html格式，直接运行即可看到效果。
<!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>分页工具条测试</title>
<style type="text/css">
div.pagination {
font-size:12;
font_face:arial;
font-color:#ffffff;
padding:3px;
margin:3px;
text-align:center;
}
div.pagination a {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #9aafe5;
text-decoration: none;
color:#2e6ab1;
}
div.pagination a:hover, div.pagination a:active {
border: 1pxsolid #2b66a5;
color:#000;
background-color: lightyellow;
}
div.pagination span.current {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid navy;
font-weight:bold;
background-color: #2e6ab1;
color:#FFF;
}
div.pagination span.disabled {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #929292;
color:#929292;
}
</style>
<script language="javascript">
function pagination(current,total){
var HTML="";
var separator="...";
if(total<=11){
if(total==0)return;
//生成上一页按钮
if(current==1){
HTML="<span class='disabled'>◄</span>";
}else{
HTML="<a href='#'onclick=topage("+(current-1)+")>◄</a>";
}
//生成中间按钮
HTML+=this.getMidHTML(1,total,current);
//生成下一页按钮
if(current==total){
HTML+="<span class='disabled'>►</span>";
}else{
HTML+="<a href='#'onclick=topage("+(current+1)+")>►</a>";
}
}else{
if(current-1<=5){
HTML=this.getPreHTML(current,total);
HTML+=this.getMidHTML(3,9,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}else if(total-current<=6){
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(total-8,total-2,current);
HTML+=this.getLastHTML(current,total);
}else{
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(current-3,current+3,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}
}
this.show=HTML;
}
pagination.prototype.getPreHTML=function(current,total){//生成前三个按钮，1,2和上一页按钮
var html="";
if(current==1){
html="<span class='disabled'>◄</span>";
html+="<span class='current'>1</span>";
}else{
html="<a href='#'onclick=topage("+(current-1)+")>◄</a>";
html+="<a href='#'onclick=topage(1)>1</a>";
}
if(current==2){
html+="<span class='current'>2</span>";
}else{
html+="<a href='#'onclick=topage(2)>2</a>";
}
return html;
}
pagination.prototype.getMidHTML=function(first,last,current){
var html="";
for(var i=first;i<=last;i++){
if(i==current){
html+="<span class='current'>"+current+"</span>";
}else{
html+="<a href='#'onclick=topage("+i+")>"+i+"</a>";
}
}
return html;
}
pagination.prototype.getLastHTML=function(current,total){
//生成三个按钮，最后两页和下一页按钮
var html="";//不可不初始化,否则在字符串相加时出现undefined
if(current==total-1){
html="<span class='current'>"+(total-1)+"</span>";
}else{
html="<a href='#'onclick=topage("+(total-1)+")>"+(total-1)+"</a>";
}
if(current==total){//生成最后二个按钮
html+="<span class='current'>"+total+"</span>";
html+="<span class='disabled'>►</span>";
}else{
html+="<a href='#'onclick=topage("+total+")>"+total+"</a>";
html+="<a href='#'onclick=topage("+(current+1)+")>►</a>";
}
return html;
}
function test()//测试以上代码的正确性
{
var hear=document.getElementById("page");
for (var i=1;i<=11;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
for (var i=11;i<=25;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
}
</script>
</head>
<body>
<div class="pagination" id="page"></div>
<input type="button" onclick="test()" value='生成测试分页工具条'/>
</body>
</html>
第二种方式：
<!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>无标题文档</title>
</head>
<body>
<div id="resultContent"></div>
<script type="text/javascript">
var currentPage = 1; //当前页
var pageSize = 10; //每页中显示的数据数
var totalpage = 0; //总页数
var recordCount = 1000; //假设总数据条数100
var numCount = 5; //每页显示多少个分页数字
//算出多少页
if (recordCount % pageSize == 0) {
totalpage = parseInt(recordCount / pageSize);
} else {
totalpage = parseInt(recordCount / pageSize) + 1;
}
totalpage = 11;//假设共有11页，测试用 ，用到时直接删除
if(totalpage > 1){ //需要显示分页工具栏
setpage();
}
//页数跳转函数
function gotopage(target) {
currentPage = target;
//把页面计数定位到第几页
setpage();
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
//设置页数
function setpage(){
var outstr = "";
outstr += '<div id="setpage" style="text-align:center;\
padding:16px;letter-spacing:2px;">';
if (totalpage <= numCount) //页数小于等于每页显示的分页数字
{
outstr += setPageHtml(1, totalpage);
}
if (totalpage > numCount) //页数大于每页显示的分页数字
{
if(parseInt((currentPage) / numCount) == 0)//前每页显示的分页数字
{
outstr += setPageHtml(1, numCount);
}
else //每页显示的分页数字 之后分页显示
{
//构造选中页始终在中间位置
var moiety = 0;
var begin = 0;
var end = 0;
if (numCount % 2 == 0) {
//偶数
moiety = parseInt(numCount / 2);
begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety ) > totalpage
? totalpage : (currentPage + moiety - 1));
} else {
//奇数
moiety = parseInt(numCount / 2);
begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety) > totalpage
? totalpage : (currentPage + moiety));
}
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ 1 + ")'>首页</a> "
outstr += setPageHtml(begin, end);
outstr+=" <a href='javascript:void(0)' onclick='gotopage("
+ totalpage+ ")'>尾页</a>";
}
}
outstr += '</div>' ;
document.getElementById("resultContent").innerHTML = outstr;
}
//构造页数Html
function setPageHtml(begin, end){
var outstr = "";
if (1 != currentPage) {
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ (currentPage - 1) + ")'>上一页</a>";
}
for (var i = begin; i <= end; i++) {
if (i != currentPage) {
outstr += '[<a href="javascript:void(0)" onclick="gotopage('
+ i + ')">' + i + '</a>]';
} else {
outstr += '<span>[' + i + ']<span>';
}
}
if (totalpage != currentPage) {
outstr += "<a href='javascript:void(0)' onclick='gotopage("
+ (currentPage + 1) + ")'>下一页</a>";
}
return outstr;
}
</script>
</body>
</html>
-------------------------------------------------------------------------分割线--------------------------------------------------
拷贝以上代码保存为html格式，直接运行即可看到效果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- MVC学习（四）几种分页的实现（2）
- sqlserver实现分页的几种方式
- 几种分页查询的实现与比较
- 【续】用ObjectDataSource实现自定义分页的心得总结，几种分页方法的性能对比
- MVC学习（四）几种分页的实现（3）
- MVC学习（四）几种分页的实现（1）
- 几种常见的分页查询实现方式
- 数据查询分页的几种实现方式
- [置顶] SSH hibernate 分页的几种实现方式
- 几种分页查询的实现与比较
- 常用的几种 SQLServer 分页查询方式实现
- JDBC实现数据库的几种基本操作（查询，分页查询，根据关键字进行查询以及插入数据）
- mysql实现分页的几种方式
- 几种分页的实现（3）
- 服务端实现分页效果的几种思路
- Oracle数据库分页查询的几种实现方法
- 几种数据库分页查询的实现与比较
- 简单的实现分页获取数据的sql语句
- 不同数据源之间数据同步的几种实现方式
- 分页查询的实现原理