直接上图，上代码了，代码量少，不解释那么多了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
//生成Pager，{ pageNum: 5, total: 132, pageSize:10, viewSize: 10, click: function(pn){ } };
$.fn.pager = function (ops) {
ops = $.extend({ pageNum: 1, total: 100, pageSize: 10, viewSize: 9, click: function (pn) { } }, ops);
var pt = parseInt(ops.total / ops.pageSize + (ops.total % ops.pageSize == 0 ? 0 : 1));
var arr = ['<a class="first" href="javascript:;">首页</a>'];
var left = parseInt(ops.pageNum > (ops.viewSize / 2) ? (ops.viewSize / 2) : ops.pageNum);
var start = ops.pageNum - left <= 0 ? 1 : ops.pageNum - left;
for (var i = start; i <= start + ops.viewSize && i <= pt; i++)
arr.push('<a class="' + (i == ops.pageNum ? 'current' : '') + '" href="javascript:;">' + i + '</a>');
arr.push('<a class="last" href="javascript:;">末页</a>');
$(this).html(arr.join(''));
$(this).find('a').click(function () {
var pn = $(this).text();
pn = pn == '首页' ? 1 : pn;
pn = pn == '末页' ? pt : pn;
ops.click(parseInt(pn));
});
return ops;
}
onload = function () {
var ops = $('.pager').pager({
pageNum: 1, total: 163, pageSize: 10, viewSize: 9, click: function (pn) {
ops.pageNum = pn;
$('.pager').pager(ops);
}
});
}
</script>
<style>
.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 a.current{
color:#333;
}
</style>
</head>
<body>
<div>asd</div>
<div style="text-align:center">
<div class="pager"></div>
</div>
<div>asd</div>
</body>
</html>