1、分頁功能實現效果如下：
2、代碼如下
<!DOCTYPE html > <html> <head> <title> 消息呈現 </title> <link rel="icon" href="picture.ico" type="image/x-icon" /> <script src="../js/jquery.min.js"></script> <style type="text/css"> .title { padding:5px; background: #F7F7F7; text-align: center; vertical-align: middle; border-radius: 12px; margin-bottom: 16px; margin-top: 10px; color: #616161; font-size: 16px; } .font { color: #00a5e0; font-size: 14px; } .paging { width: 1660px; height: 40px; background: #EFF3F8; padding-top: 8px; padding-left: 30px; margin-top: 20px; } .page-font { color: #292929; font-size: 14px; } </style> </head> <body> <div class="ui-tab"> <!-- 具體消息內容 --> </div> <div class="paging"> <!-- 分頁布局--> <table> <tr class="page-font"> <td width=""><img src="../image/first.png" width="24px" height="25px" class="firstPage" onclick="page_click(this)" /></td> <td><img src="../image/before.png" width="27px" height="22px" class="beforePage" onclick="page_click(this)" /></td> <td> | 第<input type="button" class="currentPage" value="1" readonly="readonly">頁</td> <td> 共<input type="button" class="totalPage" value="1" readonly="readonly">頁 | </td> <td><img src="../image/next.png" width="27px" height="26px" class="nextPage" onclick="page_click(this)" /></td> <td><img src="../image/last.png" width="27px" height="24px" class="lastPage" onclick="page_click(this)" /></td> </tr> </table> </div> <script type="text/javascript"> var totalPage = 10; //一共多少頁 var currentPage = 1;//當前頁碼 var information_lenght = [] //前端獲取后台數據並呈現方法 function information_display() { var data = [ { "title": "第一頁-今日日志"}, { "title": "第一頁-今日日志"}, ]; $(".ui-tab").empty() $.each(data, function (index, n) { var infor_title = "<table class=\"title\">" + "<tr >" + "<td>" + data[index].title + "</td>" + "</tr>" + "</table>"; $(".ui-tab").append(infor_title) }) } //為測試分頁功能代碼，進行網絡請求后便不需要 function information_display2() { var data = [ { "title": "第二頁-今日日志反反復復付付付"} ]; $(".ui-tab").empty() $.each(data, function (index, n) { var infor_title = "<table class=\"title\">" + "<tr >" + "<td>" + data[index].title + "</td>" + "</tr>" + "</table>"; $(".ui-tab").append(infor_title) }) } //初始化加載，分頁首頁數據，輸入：每頁多少條數據，當前頁（默認為1）；輸出：當前頁數據和總頁數 window.onload = function () { $(".totalPage").attr("value", totalPage) information_display() } //上一頁、下一頁，首頁和尾頁的單擊觸發事件 function page_click(item) { console.log(item) //首頁 if ($(item).attr("class") == "firstPage") { console.log("firstPage") pageNumber = parseInt($(".currentPage").attr("value")); $(".currentPage").attr("value", 1) } //上一頁 else if ($(item).attr("class") == "beforePage") { console.log("beforePage") pageNumber = parseInt($(".currentPage").attr("value")); if (pageNumber > 1) { $(".currentPage").attr("value", pageNumber - 1) information_display() } else { $(".beforePage").attr("disabled", false) } } //下一頁 else if ($(item).attr("class") == "nextPage") { console.log("nextPage") pageNumber = parseInt($(".currentPage").attr("value")); if (pageNumber < totalPage) { $(".currentPage").attr("value", pageNumber + 1) information_display2() } else { $(".nextPage").attr("disabled", false) } } //尾頁 else { console.log("lastPage") pageNumber = parseInt($(".currentPage").attr("value")); $(".currentPage").attr("value", totalPage) } } </script> </body> </html>