Ajax分页功能的实现
电脑换了固态硬盘，准备重装系统，因此打算把项目里一直延用的代码总结出来，防止丢失，以后也方便查阅。Ajax分页已经是非常普遍的技术了，所以也没什么需要特别说明的，直接贴代码：
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8; IE=7; IE=edge"> <meta name="renderer" content="webkit"> <title>Title</title> <style> * { margin: 0; padding: 0; } #dataList { min-height: 400px; } #page { text-align: center; font-size: 0; } .pageBtn { font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-decoration: none; display: inline-block; color: #000; margin: 5px; vertical-align: middle; } .pageBtn.current, .pageBtn:hover { color: #d60000; background-color: #ffc8f3; } #page a.prev, #page a.next { width: 0; height: 0; overflow: hidden; border-width: 8px; display: inline-block; vertical-align: middle; margin: 0 8px; } #page a.prev { border-style: dashed solid dashed dashed; border-color: transparent #c34da9 transparent transparent; } #page a.next { border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #c34da9; } ul { padding-left: 50px; list-style: decimal; } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="pagination.js"></script> </head> <body> <ul id="dataList"></ul> <div id="page"></div> <script> function initPerData(page) { $('#dataList').empty(); var options = { _page: page, _limit: 1 }; getFakeData(options); } function getFakeData(options) { $.get('http://localhost:3000/posts', options, function (data) { $('#page').html(makePage(data[0].total, options._page, options._limit)); var html = ''; for (var i = 0, len = data.length; i < len; i++) { html += `<li>${data[i].title}<br/>${data[i].body}</li>`; } $('#dataList').append(html); }); } getFakeData({_page: 1, _limit: 1}); </script> </body> </html>
pagination.js
/** * todo:创建分页 * @param total {Number} 数据总条数 * @param currentPage {Number} 当前页码 * @param pageSize {Number} 每页显示几条数据 */ function makePage(total, currentPage, pageSize) { pageSize = pageSize || 10; var html = ''; var pageCount = Math.ceil(total / pageSize); //总页数 if (pageCount > 1) { if (pageCount <= 10) { for (var i = 1; i <= pageCount; i++) { if (currentPage === i) { html += '<a href="javascript:void(0)" class="pageBtn current">' + i + '</a>'; } else { html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>'; } } } else {//如果大于10页执行此段分支 if (currentPage !== 1) {//如果不是第一页则显示上一页按钮 html += '<a onclick="initPerData(' + (currentPage - 1) + ')" href="#dataList" class="prev" data-currentP="' + (currentPage - 1) + '"></a>' } if (currentPage <= 4) { for (var i = 1; i <= 10; i++) { if (currentPage === i) { html += '<a href="#dataList" class="pageBtn current">' + i + '</a>'; } else { html += '<a href="#dataList" onclick="initPerData(' + i + ')" class="pageBtn" data-currentP="' + i + '">' + i + '</a>'; } } html += '<a href="#dataList" class="pageBtn" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>'; } else { html += '<a href="#dataList" class="pageBtn" onclick="initPerData(1)" data-currentP="1">1...</a>'; if (pageCount - currentPage <= 8) { for (var i = currentPage - (9 - (pageCount - currentPage)); i <= pageCount; i++) { if (currentPage === i) { html += '<a href="#dataList" class="pageBtn current">' + i + '</a>'; } else { html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>'; } } } else { for (var i = currentPage - 2; i <= currentPage + 7; i++) { if (currentPage === i) { html += '<a href="#dataList" class="pageBtn current">' + i + '</a>'; } else { html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>'; } } html += '<a class="pageBtn" href="#dataList" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>'; } } if (currentPage !== pageCount) {//不是最后一页就显示下一页 html += '<a onclick="initPerData(' + (currentPage + 1) + ')" href="#dataList" class="next" data-currentP="' + (currentPage + 1) + '"></a>'; } } } return html; }
每个需要分页的页面都应该实现一个initPerData方法，用于实现分页以外不同的逻辑。
