菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 孙科20230110 [打印本页]
作者: Sunke丶    时间: 2023-1-10 18:08
标题: 孙科20230110
<!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>  





欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4