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或大于总页数");
        }

    });

});