Bootstrap4分頁實現

本文轉載自查看原文 2020-03-02 23:13 1568

在網上找了一大圈分頁實現，沒有找到，這個問題本來也一直想研究卻拖了很久，於是就傻傻自己寫了一套 JS。后來才發現其實好多前端框架的代碼都是現成的。

參考了 LayUI 的分頁風格，將 Bootstrap4 的分頁完整地實現了出來。

代碼如下，將頭部引用的 jQuery 和 Bootstrap4 鏈接替換后可立即看到效果。

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <title>temp</title>
  5     <link rel="stylesheet" href="../lib/bootstrap-4.3.1/bootstrap.min.css">
  6     <script src="../lib/jquery-3.4.1/jquery-3.4.1.js"></script>
  7     <script src="../lib/bootstrap-4.3.1/bootstrap.min.js"></script>
  8 </head>
  9 <body>
 10     <nav>
 11         <ul id="pagination" class="pagination">
 12             <li class="page-item disabled"><a class="page-link" href="#">上一頁</a></li>
 13             <li class="page-item disabled"><a class="page-link" href="#">1</a></li>
 14             <li class="page-item disabled"><a class="page-link" href="#">下一頁</a></li>
 15         </ul>
 16     </nav>
 17 </body>
 18 <script>
 19 let currPage = 1,    // 當前頁碼
 20     pageSize = 10;    // 頁大小
 21 
 22 search(1);        // 測試代碼
 23 
 24 // 向后端請求數據
 25 function search(destPage) {
 26     currPage = handlePage(destPage, currPage);
 27 
 28     // 此處寫 Ajax 向后端發送 currPage 和 pageSize 請求最大頁碼（和需要的業務數據）
 29     let totalPage = 25;    // 此處模擬返回的最大頁碼
 30 
 31     $("#pagination").html(buildPagination(currPage, totalPage, 'search'));
 32 }
 33 
 34 
 35 
 36 /* 以下代碼可放入公共 JS 文件以便服務各個需要分頁的頁面 */
 37 
 38 // 返回請求的目標頁碼
 39 function handlePage(destPage, currPage) {
 40     currPage = Number(currPage);
 41     if (destPage === 'pre') {
 42         currPage--;
 43     } else if (destPage === 'next') {
 44         currPage++;
 45     } else {
 46         currPage = destPage || 1;
 47     }
 48     return currPage;
 49 }
 50 // 構建翻頁組件
 51 function buildPagination(currPage, totalPage, funcName) {
 52     currPage = Number(currPage);
 53     totalPage = Number(totalPage);
 54     let pageStr = '';
 55     if (totalPage > 1) {
 56         if (totalPage <= 5) {
 57             pageStr += prePage(currPage, funcName);
 58             pageStr += startNPage(currPage, totalPage, funcName);
 59             pageStr += nextPage(currPage, totalPage, funcName);
 60         } else if (totalPage > 5) {
 61             if (currPage < 5) {
 62                 pageStr += prePage(currPage, funcName);
 63                 pageStr += startNPage(currPage, totalPage, funcName);
 64                 pageStr += lastPage(totalPage, funcName);
 65                 pageStr += nextPage(currPage, totalPage, funcName);
 66             } else {
 67                 if (currPage <= (totalPage - 5)) {
 68                     pageStr += prePage(currPage, funcName);
 69                     pageStr += firstPage(funcName);
 70                     pageStr += plusAndMinusTwoPages(currPage, funcName);
 71                     pageStr += lastPage(totalPage, funcName);
 72                     pageStr += nextPage(currPage, totalPage, funcName);
 73                 } else {
 74                     pageStr += prePage(currPage, funcName);
 75                     pageStr += firstPage(funcName);
 76                     pageStr += endNPage(currPage, totalPage, funcName);
 77                     pageStr += nextPage(currPage, totalPage, funcName);
 78                 }
 79             }
 80         }
 81     } else {
 82         pageStr += initPage();
 83     }
 84     return pageStr;
 85 }
 86 // 初始狀態
 87 function initPage() {
 88     return '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">上一頁</a></li>' +
 89         '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">1</a></li>' +
 90         '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">下一頁</a></li>';
 91 }
 92 // 上一頁
 93 function prePage(currPage, funcName) {
 94     let str = '';
 95     if (currPage === 1) {
 96         str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">上一頁</a></li>';
 97     } else {
 98         str += '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(\'pre\');">上一頁</a></li>';
 99     }
100     return str;
101 }
102 // 固定首頁
103 function firstPage(funcName) {
104     return '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(1);">1</a></li>' +
105         '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">...</a></li>';
106 }
107 // 開頭的連續 n 頁【注意判斷總頁數是否大於5】
108 function startNPage(currPage, totalPage, funcName) {
109     let str = '', total;
110     if (totalPage > 5) {
111         total = 5;
112     } else {
113         total = totalPage;
114     }
115     for (let i = 1; i < total + 1; i++) {
116         if (i === currPage) {
117             str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>';
118         } else {
119             str += '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(' + i + ');">' + i + '</a></li>';
120         }
121     }
122     return str;
123 }
124 // 前后正負 2 頁
125 function plusAndMinusTwoPages(currPage, funcName) {
126     let str = '', start = currPage - 2, end = currPage + 3;
127     for (let i = start; i < end; i++) {
128         if (i === currPage) {
129             str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>';
130         } else {
131             str += '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(' + i + ');">' + i + '</a></li>';
132         }
133     }
134     return str;
135 }
136 // 末尾的連續 n 頁
137 function endNPage(currPage, totalPage, funcName) {
138     let str = '', start = totalPage - 5 + 1, end = totalPage + 1;
139     for (let i = start; i < end; i++) {
140         if (i === currPage) {
141             str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">' + i + '</a></li>';
142         } else {
143             str += '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(' + i + ');">' + i + '</a></li>';
144         }
145     }
146     return str;
147 }
148 // 固定末頁
149 function lastPage(totalPage, funcName) {
150     return '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">...</a></li>' +
151         '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(' + totalPage + ');">' + totalPage + '</a></li>';
152 }
153 // 下一頁
154 function nextPage(currPage, totalPage, funcName) {
155     let str = '';
156     if (currPage === totalPage) {
157         str += '<li class="page-item disabled"><a class="page-link" href="javascript: void(0);">下一頁</a></li>';
158     } else {
159         str += '<li class="page-item"><a class="page-link" href="javascript: ' + funcName + '(\'next\');">下一頁</a></li>';
160     }
161     return str;
162 }
163 </script>
164 </html>

View Code

附：當總頁數大於1時的設計思路分析

當 totalPage 小於等於 5 頁時
   　　【上一頁】【開頭的連續 n 頁（n<=5）】【下一頁】
當 totalPage 大於 5 頁時
   　　如果 currPage 小於 5
       　　　　【上一頁】【開頭的連續 5 頁】【……固定末頁】【下一頁】
   　　如果 currPage 大於等於 5
       　　　　如果 currPage 小於等於（totalPage - 5）
           　　　　　　【上一頁】【固定首頁……】【前后正負 2 頁】【……固定末頁】【下一頁】
      　　　　如果 currPage 大於（totalPage - 5）
           　　　　　　【上一頁】【固定首頁……】【末尾的連續 5 頁】【下一頁】

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 thinkphp5.1中使用Bootstrap4分頁樣式修改 Bootstrap4（12）：分頁 freemarker自定義分頁（springboot、bootstrap4） TP5分頁 Laravel 5.2分頁--怎么在一個頁面實現兩個以上的列表分頁，互不影響？ Bootstrap4布局（簡要） Bootstrap4（1）：安裝使用 Bootstrap4（3）：文字排版 Bootstrap4（5）：表格設置 Bootstrap4（14）：卡片