分页

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