在网上找了一大圈分页实现，没有一个现成好用的，一怒之下，自己造。
参考了 LayUI 的分页风格，将 Bootstrap4 的分页完整地实现了出来。
以下代码可直接进行测试。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Bootstrap4</title> 7 <link rel="stylesheet" href="lib/bootstrap-4.3.1-dist/css/bootstrap.css"> 8 <script src="lib/jquery-3.4.1.js"></script> 9 <script src="lib/bootstrap-4.3.1-dist/js/bootstrap.js"></script> 10 </head> 11 12 <body> 13 <div style="width: fit-content; margin: 0 auto;"> 14 <nav> 15 <ul id="pagination" class="pagination"> 16 <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li> 17 <li class="page-item disabled"><a class="page-link" href="#">1</a></li> 18 <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li> 19 </ul> 20 </nav> 21 </div> 22 </body> 23 24 <script> 25 list(); // 此句用于测试 26 27 var currPage = 1, // 当前页 28 pageSize = 10; // 页大小 29 30 function list(page) { 31 if (page === 'pre') { 32 currPage--; 33 } else if (page === 'next') { 34 currPage++; 35 } else { 36 currPage = page || 1; 37 } 38 // 关键在此：Ajax 从后端获取总页数作为 buildPagination 函数的参数传入 39 // let param = {currPage: currPage, pageSize: pageSize}; 40 // $.ajax({ 41 // type: 'get', 42 // url: url, 43 // data: JSON.stringify(param), 44 // success: function(res) { 45 // buildPagination(res.totalPage); 46 buildPagination(10); // 此句用于测试 47 // } 48 // }); 49 } 50 51 function buildPagination(totalPage) { 52 let pageStr = ''; 53 if (totalPage > 1) { 54 if (totalPage <= 5) { 55 pageStr += prePage(); 56 pageStr += startNPage(totalPage); 57 pageStr += nextPage(totalPage); 58 } else if (totalPage > 5) { 59 if (currPage < 5) { 60 pageStr += prePage(); 61 pageStr += startNPage(totalPage); 62 pageStr += lastPage(totalPage); 63 pageStr += nextPage(totalPage); 64 } else { 65 if (currPage <= (totalPage - 5)) { 66 pageStr += prePage(); 67 pageStr += firstPage(); 68 pageStr += plusAndMinusTwoPages(); 69 pageStr += lastPage(totalPage); 70 pageStr += nextPage(totalPage); 71 } else { 72 pageStr += prePage(); 73 pageStr += firstPage(); 74 pageStr += endNPage(totalPage); 75 pageStr += nextPage(totalPage); 76 } 77 } 78 } 79 } else { 80 pageStr += initPage(); 81 } 82 $("#pagination").html(pageStr); 83 } 84 // 初始状态 85 function initPage() { 86 return '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">上一页</a></li>' + 87 '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">1</a></li>' + 88 '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">下一页</a></li>'; 89 } 90 // 上一页 91 function prePage() { 92 let str = ''; 93 if (currPage === 1) { 94 str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">上一页</a></li>'; 95 } else { 96 str += '<li class="page-item"><a class="page-link" href="javascript: list(\'pre\');">上一页</a></li>'; 97 } 98 return str; 99 } 100 // 固定首页 101 function firstPage() { 102 return '<li class="page-item"><a class="page-link" href="javascript: list(1);">1</a></li>' + 103 '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">...</a></li>'; 104 } 105 // 开头的连续 n 页【注意判断总页数是否大于5】 106 function startNPage(totalPage) { 107 let str = '', total; 108 if (totalPage > 5) { 109 total = 5; 110 } else { 111 total = totalPage; 112 } 113 for (let i = 1; i < total + 1; i++) { 114 if (i === currPage) { 115 str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>'; 116 } else { 117 str += '<li class="page-item"><a class="page-link" href="javascript: list(' + i + ');">' + i + '</a></li>'; 118 } 119 } 120 return str; 121 } 122 // 前后正负 2 页 123 function plusAndMinusTwoPages() { 124 let str = '', start = currPage - 2, end = currPage + 3; 125 for (let i = start; i < end; i++) { 126 if (i === currPage) { 127 str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>'; 128 } else { 129 str += '<li class="page-item"><a class="page-link" href="javascript: list(' + i + ');">' + i + '</a></li>'; 130 } 131 } 132 return str; 133 } 134 // 末尾的连续 n 页 135 function endNPage(totalPage) { 136 let str = '', start = totalPage - 5 + 1, end = totalPage + 1; 137 for (let i = start; i < end; i++) { 138 if (i === currPage) { 139 str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>'; 140 } else { 141 str += '<li class="page-item"><a class="page-link" href="javascript: list(' + i + ');">' + i + '</a></li>'; 142 } 143 } 144 return str; 145 } 146 // 固定末页 147 function lastPage(totalPage) { 148 return '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">...</a></li>' + 149 '<li class="page-item"><a class="page-link" href="javascript: list(' + totalPage + ');">' + totalPage + '</a></li>'; 150 } 151 // 下一页 152 function nextPage(totalPage) { 153 let str = ''; 154 if (currPage === totalPage) { 155 str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">下一页</a></li>'; 156 } else { 157 str += '<li class="page-item"><a class="page-link" href="javascript: list(\'next\');">下一页</a></li>'; 158 } 159 return str; 160 } 161 </script> 162 163 </html>
附：当总页数大于1时的分析
当 totalPage 小于等于 5 页时
【上一页】【开头的连续 n 页（n<=5）】【下一页】
当 totalPage 大于 5 页时
如果 currPage 小于 5
【上一页】【开头的连续 n 页（n==5）】【……固定末页】【下一页】
如果 currPage 大于等于 5
currPage 小于等于（totalPage- 5）
【上一页】【固定首页……】【前后正负 2 页】【……固定末页】【下一页】
currPage 大于（totalPage- 5）
【上一页】【固定首页……】【末尾的连续 n 页】【下一页】