学步园

$(document).ready(function() {
(function() {
		var pagecontrol = arguments[0];
		pagecontrol.page.ready(function() {
					pageAjax(1);
				});

		function page(obj, element, numbtn) {
			// json格式：{"currentPage":1,"data":[{},{}],"nextPage":0,"pageSize":2,"prevPage":2,"result":"0000","total":16}
			var page = $("<div id='pageCommentBar' class='page'/>");
			var pagebtn = '<ul class="turn">';
			pagebtn += obj.currentPage == 1
					? '<li title="上一页" class="pre"><span>上一页</span></li>'
					: '<li title="上一页" class="pre"><a href="' + obj.prevPage
							+ '">上一页</a></li>';

			pagebtn += obj.currentPage == obj.total
					? '<li title="下一页" class="pre"><span>下一页</span></li>'
					: '<li title="下一页" class="next"><a href="' + obj.nextPage
							+ '">下一页</a></li>';
			pagebtn += '</ul>'

			var numbers = '<ul class="numbers">';
			if (obj.total <= numbtn) {
				for (var i = 1; i <= obj.total; i++) {
					numbers += getPageStr(i, obj.currentPage);
				}
			} else {
				if (obj.currentPage <= window.parseInt(numbtn / 2, 10) + 1) {
					for (var i = 1; i <= numbtn; i++) {
						numbers += getPageStr(i, obj.currentPage);
					}
					numbers += '<li class="pass">...</li><li><a href="'
							+ obj.total + '">' + obj.total + '</a></li>';
				} else if (obj.currentPage >= obj.total
						- window.parseInt(numbtn / 2, 10)) {
					numbers += '<li><a href="1">1</a></li><li class="pass">...</li>';
					for (var i = numbtn; i >= 1; i--) {
						numbers += getPageStr(obj.total - i + 1,
								obj.currentPage);
					}

				} else if (obj.currentPage > window.parseInt(numbtn / 2, 10)
						+ 1) {
					numbers += '<li><a href="1">1</a></li><li class="pass">...</li>';
					for (var i = window.parseInt(numbtn / 2); i >= 1; i--) {
						numbers += '<li><a href="' + (obj.currentPage - i)
								+ '">' + (obj.currentPage - i) + '</a></li>';
					}
					numbers += '<li class="current"><span>' + obj.currentPage
							+ '</span></li>';
					for (var i = 1; i <= window.parseInt(numbtn / 2); i++) {
						numbers += '<li><a href="' + (obj.currentPage + i)
								+ '">' + (obj.currentPage + i) + '</a></li>';
					}
					numbers += '<li class="pass">...</li><li><a href="'
							+ obj.total + '">' + obj.total + '</a></li>';
				}
			}
			numbers += '</ul>';
			page.append(pagebtn);
			page.append(numbers);
			page.find("a").on("click", function() {
						pageAjax($(this).attr("href"));
						return false;
					});
			$(element).html("");
			$(element).append(page)
					.append('<div style="clear: both;font-size: 0px;"></div>');
		}
		function getPageStr(i, currentPage) {
			return currentPage == i ? '<li class="current"><span>' + i
					+ '</span></li>' : '<li><a href="' + i + '" >' + i
					+ '</a></li>';
		};
		function pageAjax(pageIndex) {
			var start = (pageIndex - 1) * pagecontrol.pageSize;
			$.ajax({
						type : "POST",
						url : "/Spring/page.action",
						data : {
							"pv.pageIndex" : start,
							"pv.pageSize" : pagecontrol.pageSize
						},
						dataType : "json",
						success : function(msg) {
							if (msg.result == "0000") {
								page(msg, pagecontrol.page, pagecontrol.numbtn);
								$("#pageCon").html(getPageCon(msg));
							} else {
								pagecontrol.page.html(msg.result);
							}
						}
					});
		};
		// 要显示的数据格式
		function getPageCon(obj) {
			var str = "<div>";
			for (var i = 0; i < obj.data.length; i++) {
				str += '<div><span>' + obj.data[i].ID + '</span><span>'
						+ obj.data[i].CONTENT + '</span><span>'
						+ new Date(obj.data[i].DATETIME.time).toLocaleString()
						+ '</span></div>';
			};
			str += "</div>";
			return str;
		}
	})({
				"page" : $("#page"),
				"numbtn" : 9,
				"pageSize" : 2
			});
});

@CHARSET "UTF-8";
html, body, div, span, a, ul, li{
    margin: 0;
    padding: 0;
}
.page{
	color: #014CCC;
    font-size: 14px;
    margin-top: 20px;
}
.page ul{
	list-style-type: none;
	float: right;
}
.page ul li{
	float: left;
	margin-right: 3px;
	height: 20px;
	line-height: 20px;
}
.page .turn{
	width: 150px;
}

.page a {
    text-decoration: none;
    cursor: pointer;
    color: #014CCC;
    font-size: 14px;
}

.page .turn span {
    color: #C6C6C6;
    cursor: default;
}
.page .turn a, .page .turn span {
    border: 1px solid #E5E5E5;
    display: block;
    height: 20px;
    line-height: 22px;
    text-align: center;
    width: 48px;
}

.page li.pass {
    color: #909090;
    font: 12px/20px arial,helvetica,verdana,tahoma,sans-serif;
    line-height: 12px;
    font-weight: bold;
}
.page .numbers a:hover {
	border: 1px solid #c6c6c6;
	padding: 0 4px;
}
.page .numbers li a, .page .numbers  li span {
    display: block;
    float: left;
    font-size: 14px;
    overflow: hidden;
   	padding: 0 5px;
}
.page .current span {
    background: none repeat scroll 0 0 #C6C6C6;
    color: #FFFFFF;
    cursor: default;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
}