- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src1="js/jquery.js"></script>
- <title>分页插件CodeSnippet.cn</title>
- <script type="text/javascript">
- var $paging;
- function showPage(page) {
- // 分页
- //var pageCount = newCounts%4==0?newCounts/4:Math.ceil(newCounts/4); //总页码(共几页)
- var pageCount = 20;
- pageNo = page;
- var prevPage = pageNo - 1;
- var nextPage = pageNo + 1;
- var strHtml = '';
- strHtml += '<ul>';
- if (prevPage < 1) {
- strHtml += '';
- } else {
- strHtml += '<li title="Prev Page"><a href="#" onclick="gotoPage(' + prevPage + ')"><</a></li>';
- }
- if (pageCount == 0) {
- strHtml += '<li title="Page0"></li>';
- } else if (pageCount > 0 && pageCount <= 5) {
- for (var i = 1; i <= pageCount; i++) {
- if (i == pageNo) {
- strHtml += '<li title="Page ' + i + '">' + i + '</li>';
- } else {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
- }
- }
- } else {
- if (pageNo <= 4) {
- for (var i = 1; i <= 5; i++) {
- if (i == pageNo) {
- strHtml += '<li title="Page ' + i + '">' + i + '</li>';
- } else {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
- }
- }
- strHtml += '...<a href="#" onclick="gotoPage(' + pageCount + ')">' + pageCount + '</a></li>'
- } else if (pageNo > 4 && pageNo < pageCount - 3) {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(1,)">1</a>...</li>'
- for (var i = pageNo - 2; i <= pageNo + 2; i++) {
- if (i == pageNo) {
- strHtml += '<li title="Page ' + i + '">' + i + '</li>';
- } else {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
- }
- }
- strHtml += '...<a href="#" onclick="gotoPage(' + pageCount + ')">' + pageCount + '</a></li>'
- } else {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(1,)">1</a>...</li>'
- for (var i = pageCount - 4; i <= pageCount; i++) {
- if (i == pageNo) {
- strHtml += '<li title="Page ' + i + '">' + i + '</li>';
- } else {
- strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
- }
- }
- }
- }
- if (nextPage > pageCount) {
- strHtml += '';
- } else {
- strHtml += '<li title="Next Page"><a href="#" onclick="gotoPage(' + nextPage + ')">></a></li>';
- // console.log("ss");
- }
- strHtml += '<li> 总共' + pageCount + '页</li>'
- strHtml += '</ul>';
- $paging = strHtml;
- $("#nextpage").append(strHtml);
- }
- function gotoPage(pageNo) {
- page = pageNo;
- $(".nextpage").html("");
- showPage(page);
- }
- $(document).ready(function () {
- showPage(1);
- })
- </script>
- <style>
- .nextpage { line-height: 22px; font-size: 12px; padding-bottom: 50px; }
- .nextpage ul { }
- .nextpage ul li { text-align: center; float: left; list-style: none; display: inline-block; margin-left: 5px; }
- .nextpage ul li a { display: inline-block; width: 20px; height: 22px; border: #ccc 1px solid; cursor: pointer; }
- .nextpage ul li a:hover { color: #fff; background: #2b529c; }
- .nextpage input { width: 20px; }
- </style>
- </head>
- <body>
- <div id="nextpage" class="nextpage">
- <!-- <ul></ul> -->
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/130120148517.html
来源: http://www.codesnippet.cn/detail/130120148517.html