上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>分页--JK</title> <style type="text/css" title="currentStyle" media="screen"> /* Paginator */ .pagebar { font: 14px normal Arial, Helvetica, sans-serif; color: #666; background-color: #eee; text-align: center; } .pagebar span{ padding: 2px 4px;color:blue; display:inline-block; *display:inline; margin:0 2px; cursor:pointer; } .pagebar .break { margin:0 5px; } .pagebar .current { font-weight:bold; color:red; } </style> </head> <body> 分页条。<hr/> 总页数：<input id=totalPages value=50 onchange="changePage(1);">(可以修改，以模拟总页数不同时的分页结果) <div id="pagebar" class="pagebar"></div> </body> <script src="http://s0.qhimg.com/lib/jquery/162.js"></script> <script language="javascript" type="text/javascript"> /* <div id="pagebar" class="pagebar"><sapn><i class="icon-pagepre"></i></span><span>1</span><span class="current">2</span><span>3</span><sapn><i class="icon-pagenext"></i></span></div> */ function getPagesHtml(total, pageNo) { var pageHtml = function(i) { return '<span data-pageNo="' + i + '" ' + (i == pageNo ? 'class="current"' : '') + '>' + i + '</span>'; }; if (total < 2) return ""; var html = [], beginPage = 1, endPage = total; if (total > 10) { if (pageNo > 4) beginPage = Math.min(pageNo - 2, total - 5); if (pageNo < total - 3) endPage = Math.max(pageNo + 2, 5); } if (pageNo > 1) html[0] = '<span data-pageNo="' + (pageNo - 1) + '"><i class="icon-pagepre"></i>前一页</span>'; if (beginPage > 2) { html.push(pageHtml(1)); html.push('<i class="break">...</i>'); } for (var i = beginPage; i <= endPage; i++) { html.push(pageHtml(i)); } if (total > endPage) { html.push('<i class="break">...</i>'); html.push(pageHtml(total)); } if (pageNo < total) html.push('<span data-pageNo="' + (pageNo + 1) + '"><i class="icon-pagenext"></i>下一页</span>'); return html.join(""); } function changePage(pageNo) { pageNo = pageNo || 1; $('#pagebar').html(getPagesHtml(document.getElementById("totalPages").value * 1, pageNo)); } $('#pagebar').delegate('span', 'click', function() { var pageNo = $(this).attr('data-pageNo'); if (pageNo) changePage(pageNo * 1); }); changePage(1); </script> </html>
看效果
分页--JK
分页条。
总页数：(可以修改，以模拟总页数不同时的分页结果)