|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script> <style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } #cover{ position:fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; display: none; } #editBox{ width: 300px; height: 260px; background-color: #fff; display: flex; align-items: center; flex-direction: column; justify-content: space-around; display: none; } </style> </head> <body> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>电话</th> </tr> </thead> <tbody></tbody> </table> <!-- 分页 --> <div id="pages"></div> <div id="cover"> <div id="editBox"> <p id="editId">id</p> <input type="text" placeholder="name" id="editName"> <button id="editbtn">确认编辑</button> </div> </div> <script> // 获取dom节点 const tbody = document.querySelector('tbody'); const pages = document.querySelector('#pages'); var editBox=document.querySelector('#editBox'); var editName=document.querySelector('#editName') var editbtn=document.querySelector('#editbtn') const baseURL = 'http://162.14.107.109'; renderList('http://162.14.107.109/list') function renderList(url1) { axios.get(url1).then(res => { // console.log(res.data.data); let data = res.data.data; // console.log(data); // 列表数据 let list = data.data; // 列表的html let listHtml = ''; list.forEach(item => { listHtml += ` <tr> <td>${item.id}</td> <td>${item.name}</td> <td>${item.age}</td> <td>${item.sex}</td> <td>${item.tel}</td> <td><button class=editBtn>编辑</button><button class=delBtn>删除</button></td> </tr> ` }); // 把html结构拼接入页面中 tbody.innerHTML = listHtml; // 当前页码： let current_page = data.current_page; // 总页码数 let last_page = data.last_page; // 分页数据的链接 let lins = data.links; // 上一页的链接 let prev_page_url = data.prev_page_url; // 下一页的链接 let next_page_url = data.next_page_url; // 声明一个变量，用来保存页码的数字结构 let pageNum = ''; // 分页的数字 for (let i = 1; i <= last_page; i++) { pageNum += `<button class="pageNum">${i}</button>`; } // 上一页 let prev = `<button class="btn" ${current_page == 1 ? 'disabled' : ''} data-url="${prev_page_url}">上一页</button>` // 下一页 let next = `<button class="btn" ${current_page == last_page ? 'disabled' : ''} data-url="${next_page_url}">下一页</button>` // 把拼接好的数字放入分页的盒子中 pages.innerHTML = prev + pageNum + next; }); } }) </script>
| 
