<!doctype html> <html> <head> <meta charset="utf-8"> <title>分页的实现</title> <style type="text/css"> *{margin:0;padding:0;} a{color:#666;text-decoration:none;font-size:14px;} ul.pagination{clear:both;display:block;overflow:hidden;margin:50px auto 0;width:fit-content;background-color:#cce8cf;} ul.pagination li{float:left;display:inline-block;margin:0 10px 0 0;border:1px solid #666;list-style:none;} ul.pagination li:last-child{margin-right:0;} ul.pagination li a{display:block;padding:5px 10px;text-align:center;} ul.pagination li.active{background-color:#666;} ul.pagination li.active a{color:#fff;} </style> </head> <body> <ul class="pagination"> </ul> <script type="text/jscript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> /** * 分页 * 说明:页码数字最多显示10个,其中当前页位于第6个。 * * @param int totalPages 总页数 * @param int page 当前页 * @return void */ function pagination(totalPages, page) { if (totalPages > 0) { var html = ''; // 计算起始页码和结束页码 var start = page - 5; // 当前页往前数5页 var end = page + 4; // 当前页往后数4页 // 起始页码小于1需要调整 if (start < 1) { end += Math.abs(start) + 1; // 结束页码加大 start = 1; // 起始页码改为1 } // 结束页码大于总页数需要调整(结束页码改为总页数) end = end > totalPages ? totalPages : end; // 页码数字不足10个 if ((end - start) < 9) { start -= 10 - (end - start + 1); // 起始页码减小 start = start > 0 ? start : 1; // 避免起始页码为负数 } // 上一页处理(当前页码大于1才有上一页) if (page > 1) { html += '<li><a href="javascript:;">上一页</a></li>'; } // 页码处理 for (i = start; i <= end; i++) { if (i == page) { html += '<li class="active"><a href="javascript:;">' + i + '</a></li>'; } else { html += '<li><a href="javascript:;">' + i + '</a></li>'; } } // 下一页处理(当前页码小于总页数才有下一页) if (page < totalPages) { html += '<li><a href="javascript:;">下一页</a></li>'; } $('ul.pagination').html(html); } } pagination(32, 16); </script> </body> </html>
Copyright © 2023 码农人生. All Rights Reserved