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>
