![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：可以在创建分页条时同步设置高亮的 想一下如何做?
Collection
Collection
代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="lib/jquery-3.5.1.js"></script><title>Ajax无刷新分页</title><style>table {border-collapse: collapse;border: 1px solid;text-align: center;margin: auto;width: 510px;box-shadow: 0px 0px 4px rgb(113, 114, 114);}table caption {font-size: 1.8rem;margin-bottom: 10px;text-shadow: 2px 2px 2px rgb(167, 168, 168);}th,td {border: 1px solid;padding: 5px;}tr:hover {background-color: #ccc;cursor: pointer;}thead tr:first-of-type {background-color: #ddd;}p {text-align: center;}p a {text-decoration: none;border: 1px solid;padding: 0 8px;}.active {background-color: rgb(206, 101, 101);border: 1px solid red;color: white;}</style></head><body><table><caption>员工信息表</caption><thead><tr><th>id</th><th>姓名</th><th>年龄</th><th>性别</th><th>职位</th><th>手机号</th></tr></thead><tbody></tbody></table><!-- 分页条 --><p></p></body><script>// 默认是第1页var page = 1;// 默认显示第一页,用一个函数来实现显示getPageData(page);// 分页函数function getPageData(page) {// ajax无刷新分页$.ajax({type: "post",url: "page_data.php",data: { page: page },dataType: "json",success: show,});}// 数据显示函数function show(data) {// 1. 显示表格数据var str = "";data.staffs.forEach(function (staff) {str += "<tr>";str += "<td>" + staff.id + "</td>";str += "<td><input type='text' value=" + staff.name + "></td>";str += "<td>" + staff.age + "</td>";str += "<td>" + staff.sex + "</td>";str += "<td>" + staff.position + "</td>";str += "<td>" + staff.mobile + "</td>";str += "</tr>";});$("tbody").html(str);// 2. 显示分页条var str = "";for (var i = 1; i <= data.pages; i++) {str += '<a href="" data-index=' + i + ">" + i + "</a> ";}// 将页码添到分页条, 并将当前页置为高亮$("p").html(str).find("a").eq(page - 1).addClass("active");// 分页条的点击事件$("p a").click(function (ev) {// 禁用<a>的跳转默认行为ev.preventDefault();page = $(this).attr("data-index");$("tbody").html("");getPageData(page);});}</script></html>
效果图如下：
总结：
1、Ajax应用，按照老师归纳的步骤，实现起来比较优雅。
2、还需要多学、多记、多练，避免记混。
3、两个月的时间，大量的语法、丰富的函数，众多的案例，对全栈工作有了初步的认知。感谢朱老师的无私讲授、辛勤付出！