求一个js分页代码

Question

是div标签的,需要10个div一页,谁那有类似的带css的js分页代码吗

Answer 1

我的心血。虽然不算很好。//页码的容器
<div class="page2"></div>
//去下个jquery.
<script>
var record_count=100;
var page=1;
 $(".page2").html(GetPager(10, record_count, page, 8, 3, "index_${page}.html;", "上一页", "下一页", "index.html"));
</script>
//PageSize:每页显示数量
//RecordCount:总数据数量
//CurrentPage:当前页
//DisplayCount:页码数量， 比如是5，页面最多就只有5，比如1,2,3,4...10. 超出5的部分就会隐藏。配合SplitIndex使用
//SplitIndex:断开位置。比如DisplayCount=10，SplitIndex=3. 如果有20页。当前页如果是第5页，就会是上一页1...23456789...20下一页. 反正DisplayCount>SplitIndex. 
UrlRule：分页的路径规则，如果是index_{page}.html,那么分页就是index_1.html,index_2.html,index_3.html
PrevText:上一页名称，你可以传"Prev"也可以传"上一页"。就是个按钮的Text.
NextText:下一页名称
FirtPageHtml：第一页的名字。因为我考虑到index_{page}.html,这样的话，第一页就会是index_1.html,但是有些需要设置默认页什么的。你可以传"index.html",这样表示第一页。
实例看http://www.7y7.com/t/17526528/#comments
function GetPager(PageSize, RecordCount, CurrentPage, DisplayCount, SplitIndex, UrlRule, PrevText, NextText, FirtPageHtml) {
    if (CurrentPage == 0)
        CurrentPage = 1;
    var PageCount = 0;
    var a = "" + RecordCount / PageSize;
    a=a.split('.')[0];
    PageCount = RecordCount % PageSize > 0 ? ( parseInt(a)) + 1 : RecordCount / PageSize;
    if (RecordCount == 0)
        PageCount = 1;
    var html = "";
    //页码
    if (PageCount > 1) {
        if (CurrentPage == 0 || CurrentPage == 1)
            html = "<a class='disabled' href=\"javascript:;\">" + PrevText + "</a>";
        else if (CurrentPage == 2)
            html = "<a href=\"javascript:;\" onclick='" + FirtPageHtml + "'>" + PrevText + "</a>";
        else
            html = "<a href=\"javascript:;\" onclick='" + UrlRule.replace("${page}", (CurrentPage - 1)) + "'>" + PrevText + "</a>";        if (CurrentPage > 3 & PageCount > DisplayCount) {
            html += "<a href=\"javascript:;\" onclick='" + FirtPageHtml + "'>1</a><cite>...</cite>";
        }
        var bo1 = (CurrentPage - SplitIndex) < 0 ? 0 : CurrentPage - SplitIndex;
        for (i = (DisplayCount + bo1 > PageCount ? ((PageCount - DisplayCount) > 0 ? PageCount - DisplayCount : 0) : bo1); i < (DisplayCount + bo1 > PageCount ? PageCount : DisplayCount + bo1); i++) {
            if ((CurrentPage - 1) == i || (CurrentPage == 0 && i == 0)) {
                html += "<a class='curent' href=\"javascript:;\">" + (i + 1) + "</a>";
            }
            else if (i == 0) {
                html += "<a href=\"javascript:;\" onclick='" + FirtPageHtml + "'>1</a>";
            }
            else {
                html += "<a href=\"javascript:;\" onclick='" + UrlRule.replace("${page}", (i + 1)) + "'>" + (i + 1) + "</a>";
            }
        }
        if (PageCount > DisplayCount && PageCount - CurrentPage > DisplayCount - SplitIndex) {
            html += "<cite>...</cite><a href=\"javascript:;\" onclick='" + UrlRule.replace("${page}", PageCount) + "'>" + PageCount + "</a>";
        }
        if (CurrentPage == PageCount) {
            html += "<a class='disabled' href=\"javascript:;\">" + NextText + "</a>";
        }
        else if (CurrentPage == 0) {
            html += "<a href=\"javascript:;\" onclick='" + UrlRule.replace("${page}", (CurrentPage + 2)) + "'>" + NextText + "</a>";
        }
        else {
            html += "<a href=\"javascript:;\" onclick='" + UrlRule.replace("${page}", (CurrentPage + 1)) + "'>" + NextText + "</a>";
        }
    }
    return html;
}
.page2{width:640px;height:auto;float:left;margin:15px 0 5px 0px;display:inline;}
.page2 a{float:left;color:#666;border:1px solid #ddd;padding:4px 8px;margin:0 3px 0 2px;background:#f5f5f5;line-height:20px;display:block;}
.page2 a:hover{border:1px solid #ccc;background:#FB156F;color:#fff;text-decoration:none;}
.page2 a.disabled{color:#ccc;border:1px solid #ccc;}
.page2 a.disabled:hover{background:none;}
.page2 a.curent{color:#E190A1;border:1px solid #E190A1;}
.page2 a.curent{background:none;}
.page2 i{float:left;line-height:24px;font-style:normal;}
.page2 cite{float:left;line-height:24px;}