html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../static/css/test.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.cookie/jquery.cookie.min.js"></script> <script src="../static/js/test.js"></script> </head> <body> <div class="container"> <div class="top"> <div class="search"> <select class="subhead"> <option value="0">全部栏目</option> <option value="1">新闻动态</option> <option value="2">通知通告</option> </select> <input type="text" class="sub_title" placeholder="请输入标题"> <input type="text" class="sub_content" placeholder="请输入摘要"> <input type="button" value="搜索" class="btn"> </div> <div class="btns"> <input type="button" value="批量删除" class="disDel"> <input type="button" value="添加" class="add"> </div> </div> <table border="1" cellspacing="0"> <thead> <tr> <td><input type="checkbox" class="checkAll"></td> <td>ID</td> <td>学校编号</td> <td>学校名称</td> <td>专业编号</td> <td>专业名称</td> <td>专业最低分</td> <td>专业最位次</td> <td>操作</td> <tr> </thead> <tbody class="contentBody"> //表单数据 </tbody> <table> <ul class="pagenation"> //表单分页 </ul> </table> </table> </div> </body> </html>
css
* { margin: 0; padding: 0; } /* 内容管理列表页面样式 */ .container {} .container .top { display: flex; justify-content: space-between; margin-bottom: 10px; } .container .top input[type=text], .container .top select { border: 1px solid rgb(88, 136, 246); padding: 10px; border-radius: 5px; outline: none; margin-right: 4px; } .container .top input[type=button] { background: linear-gradient(45deg, rgb(88, 136, 246), rgb(98, 110, 232)); padding: 10px; border: none; color: #fff; border-radius: 5px; cursor: pointer } .container table { width: 100%; border: none; } .container table thead tr { background: linear-gradient(45deg, rgb(98, 110, 232), rgb(88, 136, 246)) } .container table thead tr td { color: #fff; } .container table thead tr td:last-child, .container table tbody tr td:last-child, .container table thead tr td:first-child, .container table tbody tr td:first-child { text-align: center; } .container table tbody tr:nth-child(odd) { background: #eee } .container table tbody tr:nth-child(even) { background: #ddd } .container table td { padding: 10px; border: 1px solid #fff; } .container table td input { border: 1px solid rgb(88, 136, 246); color: rgb(88, 136, 246); padding: 5px; border-radius: 3px; cursor: pointer; } .container .pagenation { display: flex; justify-content: center; margin-top: 20px; } .container .pagenation li { list-style: none; border: 1px solid rgb(88, 136, 246); color: rgb(88, 136, 246); padding: 5px; cursor: pointer; font-size: 12px; margin: 0 4px; } .container .pagenation li.current { background: rgb(88, 136, 246); color: #fff; } /* 内容管理添加页面样式 */ .container .item { display: flex; flex-direction: column; margin-bottom: 20px; } .container .item input, .container .item select, .container .item textarea { border: 1px solid rgb(88, 136, 246); padding: 10px; border-radius: 5px; outline: none; } .container .item label { color: rgb(88, 136, 246); font-weight: 600; margin-bottom: 5px; } .container .item:last-child { flex-direction: row; justify-content: center; } .container .item:last-child input { background: linear-gradient(45deg, rgb(88, 136, 246), rgb(98, 110, 232)); padding: 10px 20px; border: none; color: #fff; border-radius: 5px; cursor: pointer; margin: 0 10px; } .container .item .myForm { display: flex; } .container .item .myForm .imgBox { margin-left: 20px; } .container .item .myForm .imgBox img { width: 100px; height: 50px; object-fit: cover; }
ajax
$(function(){ //定义单个页面包含数据的数量 var pageSize = 5 //初始化数据 getData(1) //定义加载数据函数 function getData(page){ //发起请求 $.ajax({ url:"/testTry", type:"get", data:{ ( pageSize:pageSize, page:page, }, success:function(data){ $(".contentBody").empty(); var arr = data; console.log(arr); for(var i=0;i<data.length;i++){ $(".contentBody").append('<tr>'+ '<td><input type="checkbox" class="item" index="'+arr[i].id+'"></td>'+ '<td>'+arr[i].id+'</td>'+ '<td>'+arr[i].schoolCode+'</td>'+ '<td>'+arr[i].schoolName+'</td>'+ '<td>'+arr[i].pCode+'</td>'+ '<td>'+arr[i].pName+'</td>'+ '<td>'+arr[i].lowestScore+'</td>'+ '<td>'+arr[i].lowestRank+'</td>'+ '<td>'+ '<input type="button" value="删除" class="del" index="'+arr[i].id+'">'+ '<input type="button" value="修改" class="update" index="'+arr[i].id+'">'+ '</td>'+ '</td>'+ '</tr>' ) } } }) } })