您的位置：首页 > Web前端 > JavaScript

7种JS脚本分页代码

2013-07-19 17:37 387 查看

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title></title>

<style>

body {font-size: 12px;}

.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;

}

.pages .count {

font-weight: bold;

border-right: none;

padding: 2px 10px 1px 10px;

}

.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;

}

.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;

}

.pages select, .pages input {

color: #000000;

font-size: 10px;

font-family: Tahoma, Verdana;

}

.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">

<!--

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 +='Pages: ' +this.page + ' / ' + this.pageCount +'';

 strHtml +='';

 if (prevPage< 1) {

 strHtml+= '«';

 strHtml+= '‹<
4000
;/span>';

 } else{

 strHtml+= '<a href="javascript:' +this.name +'.toPage(1);">«</a>';

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + prevPage +');">‹</a>';

 }

 for (var i =1; i <= this.pageCount; i++) {

 if(i > 0) {

 if(i == this.page) {

 strHtml+= '[' +i + ']';

 }else {

 strHtml+= '<a href="javascript:' + this.name+ '.toPage(' + i + ');">[' + i +']</a>';

 }

 }

 }

 if (nextPage> this.pageCount) {

 strHtml+= '›';

 strHtml+= '»';

 } else{

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + nextPage +');">›</a>';

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + this.pageCount +');">»</a>';

 }

 strHtml +=' ';

 break;

 case 1 : //模式1(10页缩略,首页,前页,后页,尾页)

 strHtml +='Pages: ' +this.page + ' / ' + this.pageCount +'';

 strHtml +='';

 if (prevPage< 1) {

 strHtml+= '«';

 strHtml+= '‹';

 } else{

 strHtml+= '<a href="javascript:' +this.name +'.toPage(1);">«</a>';

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + prevPage +');">‹</a>';

 }

 if (this.page% 10 ==0) {

 varstartPage = this.page - 9;

 } else{

 varstartPage = this.page - this.page % 10 + 1;

 }

 if (startPage> 10) strHtml += '<a href="javascript:' +this.name + '.toPage(' + (startPage - 1) +');">...</a>';

 for (var i =startPage; i < startPage + 10; i++) {

 if(i > this.pageCount) break;

 if(i == this.page) {

 strHtml+= '[' +i + ']';

 }else {

 strHtml+= '<a href="javascript:' + this.name+ '.toPage(' + i + ');">[' + i +']</a>';

 }

 }

 if(this.pageCount >= startPage + 10) strHtml +='<a href="javascript:' +this.name + '.toPage(' + (startPage + 10) +');">...</a>';

 if (nextPage> this.pageCount) {

 strHtml+= '›';

 strHtml+= '»';

 } else{

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + nextPage +');">›</a>';

 strHtml+= '<a href="javascript:' +this.name + '.toPage(' + this.pageCount +');">»</a>';

 }

 strHtml +=' ';

 break;

 case 2 : //模式2(前后缩略,页数,首页,前页,后页,尾页)

 strHtml +='Pages: ' +this.page + ' / ' + this.pageCount +'';

 strHtml +='';

 if (prevPage< 1) {

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航