分页组件

上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分页--JK</title>
<style type="text/css" title="currentStyle" media="screen">
/* Paginator */
.pagebar {
    font: 14px normal Arial, Helvetica, sans-serif;
    color: #666;
    background-color: #eee;
    text-align: center;
}
.pagebar span{
    padding: 2px 4px;color:blue;
    display:inline-block;
    *display:inline;
    margin:0 2px;
    cursor:pointer;
}
.pagebar .break {
    margin:0 5px;
}
.pagebar .current {
    font-weight:bold;
    color:red;
}
</style>
</head>
<body>
分页条。<hr/>
总页数：<input id=totalPages value=50 onchange="changePage(1);">(可以修改，以模拟总页数不同时的分页结果)
<div id="pagebar" class="pagebar"></div>


</body>
<script src="http://s0.qhimg.com/lib/jquery/162.js"></script>
<script language="javascript" type="text/javascript">
/*     <div id="pagebar" class="pagebar"><sapn><i class="icon-pagepre"></i></span><span>1</span><span class="current">2</span><span>3</span><sapn><i class="icon-pagenext"></i></span></div> */
function getPagesHtml(total, pageNo) {
    var pageHtml = function(i) {
        return '<span data-pageNo="' + i + '" ' + (i == pageNo ? 'class="current"' : '') + '>' + i + '</span>';
    };
    if (total < 2) return "";
    var html = [],
        beginPage = 1,
        endPage = total;
    if (total > 10) {
        if (pageNo > 4) beginPage = Math.min(pageNo - 2, total - 5);
        if (pageNo < total - 3) endPage = Math.max(pageNo + 2, 5);
    }
    if (pageNo > 1) html[0] = '<span data-pageNo="' + (pageNo - 1) + '"><i class="icon-pagepre"></i>前一页</span>';
    if (beginPage > 2) {
        html.push(pageHtml(1));
        html.push('<i class="break">...</i>');
    }
    for (var i = beginPage; i <= endPage; i++) {
        html.push(pageHtml(i));
    }    
    if (total > endPage) {
        html.push('<i class="break">...</i>');
        html.push(pageHtml(total));
    }
    if (pageNo < total) html.push('<span data-pageNo="' + (pageNo + 1) + '"><i class="icon-pagenext"></i>下一页</span>');
    return html.join("");
}


function changePage(pageNo) {
    pageNo = pageNo || 1;
    $('#pagebar').html(getPagesHtml(document.getElementById("totalPages").value * 1, pageNo));
}

$('#pagebar').delegate('span', 'click', function() {
    var pageNo = $(this).attr('data-pageNo');
    if (pageNo) changePage(pageNo * 1);
});
changePage(1);
</script>
</html>

看效果

 

分页--JK

分页条。

总页数：(可以修改，以模拟总页数不同时的分页结果)

 

posted on 2015-09-17 13:55  JKisJK  阅读(486)  评论(0)  编辑  收藏  举报

导航