html+js实现分页功能代码实例

﹏ヽ暗。殇╰゛Y 2023-01-13 05:54 167阅读 0赞

1、分页功能实现效果如下：

![在这里插入图片描述][20210416120158399.png]

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>

完整项目：[http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu]

[20210416120158399.png]: /images/20221022/ffd73389992440e3b089fee9411ae20c.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu