Jquery制作的页码插件

刚传好就有一个小bug。

代码中

var param; 改为 var param="";

一直发现我用的页码生成都是在服务端操作。由于最近周旋在各个语言中。所以如果一直都用服务端生成，那么每个语言都要写一次。所以我决定用Jquery试一下。

当然各位可以将以下代码封装成插件。也可以直接这样用。【ps:本人不太懂js哈，，写得不好别责怪。或许jq代码可以更优化，给位大大提点意见】

先上截图



再放demo:http://65.49.11.218/pager/js.html

下载：

/Files/pika/page.rar

<div class="pager"><div style="position:relative; float:right;"><a class="btn" href="#">上一页</a><a class="btn" href="#">下一页</a> 到第 <input id="pagerno" value="1" /> 页 <input type="button" class="okbtn" value="确定" /></div></div>

首先我们有一个html的。这个主要为了分页是靠右，所以增加了一个

<div style="position:relative; float:right;">

如果你们觉得不需要靠右，可以将此层删掉即可。

当然我们还需要一些css辅助

.pager{ width:100%; position:relative; line-height:20px; height:23px; }
.pager .nowpager{color:#ff8303; border:none; font-weight:bold;}
.pager a{color:#032ed5; display:block; height:20px; width:25px; border:solid #cccccc 1px; float:left; position:relative; line-height:20px; margin-right:3px;}
.pager .btn { width:60px; }
.pager .no { color:#cccccc;}
.pager .no:hover { text-decoration:none;}
.pager input{width:20px;border:solid #cccccc 1px; height:20px; text-align:center;}
.pager .okbtn{ background-color:#fff;width:40px; background-image:#fff; height:22px;}

最后主角是js:

这段参数主要说一下，传入参数maxpage【最大页码】，nowpage【当前页码】

最少页码为1，分页参数为page

本js代码能自动分析其余参数，并保留，可以很好地用于带参数的url。

第一版，新鲜写出来。 你们可以试一下优化哈！兼容ie6.

//页码JS类
var maxpage = 17,
nowpage = 1;
$(function() {
var param;
if (window.location.search != "" && window.location.search != null) {
param = window.location.search.substring(1).split("&");
for (var val in param) {
if (param[val].split("=")[0] == "page") {
$("#pagerno").val(param[val].split("=")[1]);
}
}
}

var pageurl = window.location.pathname;
var url = pageurl + "?page=";
if (param != null) {

var paramurl = "";
for (var val in param) {
if (param[val].split("=")[0] != "page") {
paramurl += "&" + param[val];
} else {
nowpage = parseInt(param[val].split("=")[1]);
}
}
}

if (nowpage == 1) {
$(".pager a").eq(0).addClass("no");
} else {
$(".pager a").eq(0).attr("href", url + (nowpage - 1) + paramurl);
}
if (nowpage == maxpage) {
$(".pager a").eq(1).addClass("no");
} else {
$(".pager a").eq(1).attr("href", url + (nowpage + 1) + paramurl);

}

var startpager;
if (maxpage <= 5 || nowpage < 5) {
startpager = 1;
} else if (nowpage + 4 > maxpage) {
startpager = maxpage - 4;

} else {
startpager = nowpage - 2;

}

var htmle = "";
for (var i = 0; i < 5; i++) {
if (startpager == nowpage) {
htmle += "<a class='nowpager'>" + startpager + "</a>";
} else {
htmle += "<a href='" + url + startpager + paramurl + "'>" + startpager + "</a>";
}
startpager++;
}
$(".pager a").eq(0).after(htmle);
$(".no").click(function() {
alert("已经无法翻页");
});
$(".okbtn").click(function() {

if (parseInt($("#pagerno").val()) <= maxpage && parseInt($("#pagerno").val()) > 0) {
window.location = url + $("#pagerno").val() + paramurl;
} else {
alert("页码不能少于0或大于总页数");
}

});

});