Beautiful分页插件

Html

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;
}

//生成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);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

Beautiful分页插件



代码描述：单个分页条

1

最新

发表评论全部评论

暂时没有评论！

清晨0

2017/10/11 10:54:55

感觉很不错
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

丶似浅

相关代码

Beautiful分页插件

最新