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>