漂亮的前端分页方法

html页面：

-------------------------------------------------------------------------------------------------

<div style="text-align:center">

    <div class="pager"></div>

</div>

Css样式：

-------------------------------------------------------------------------------------------------

.pager {

font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;

border:1px solid #dddddd;

border-radius:3px;

display:inline-block;

clear:both;

}

.pager a,.pager span {

font-size:14px;

color:#428bca;

border-right:1px solid #dddddd;

padding:4px 9px;

float:left;

text-decoration:none;

}

.pager span {

color:#fff;

background:#428bca;

}

.pager a:hover {

color:#2a6496;

background:#f2f2f2;

}

.pager a.last {

border-right:0;

}

js方法：

-------------------------------------------------------------------------------------------------

//生成Pager，当前页码, 总页数, 回调function

$.fn.pager = function(page, total, callback) {

    var html = '';

    html += '<a class="first" href="javascript:;">首页</a>';

    html += '<a class="first" href="javascript:;">上一页</a>';

    var start = page - 5 < 0 ? 0 : page - 5;

    var end = page + 5 < total ? page + 5 : total;

    for (var i = start; i < end; i++) {

        html += i == page - 1 ? '<span>' + (i + 1) + '</span>' : '<a href="javascript:;">' + (i + 1) + '</a>';

    }

    html += '<a class="first" href="javascript:;">下一页</a>';

    html += '<a class="last" href="javascript:;">末页</a>';

    $(this).html(html).find('a').click(function() {

        var p = $(this).text();

        if (p == '上一页') p = page == 1 ? 1 : page - 1;

        if (p == '下一页') p = page == total ? total : page + 1;

        if (p == '首页') p = 1;

        if (p == '末页') p = total;

        if (p != page) callback(parseInt(p));

    });

}

onload = function() {

    //用用回调

    function go(p) {

        $('.pager').pager(p, 82, go);

    }

    $('.pager').pager(1, 82, go);

}