<!DOCTYPE html> <html> <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"> <script src="./jquery-3.6.1.js"></script> <title></title> <style> .tableScroll { max-height: 350px; position: relative; width: 800px; overflow: auto; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .tableScroll::-webkit-scrollbar { width: 0 !important } #myTable { border: 1px solid #808080; color: #fff; border-collapse: collapse; background-color: #000; table-layout: fixed; width: 100%; } #myTable thead { text-align: center; } #myTable thead th { border: 1px solid #aaaaff; font-weight: 400; padding: 0; width: 200px; box-sizing: border-box; height: 50px; position: sticky; top: -1px; background-color: #000; } #myTable thead th:last-child { position: sticky; right: -1px; z-index: 999; } #myTbody { text-align: center; } #myTbody tr { height: 47px; } #myTbody tr:nth-child(2n + 1) td { background-color: #2e2e2e; } #myTbody tr:nth-child(2n + 2) td { background-color: #000; } #myTbody td { border: 1px solid #aaaaff; width: 78px; box-sizing: border-box; height: 47px; } #myTbody td.alarm_td { width: 720px; } #myTbody tr td:last-child { position: sticky; right: -1px; } .myBlue { background-color: #409EFF; color: #fff; } /* 工具栏 */ .tool { display: flex; width: 800px; margin-left: 100px; } .selectNum { display: flex; } #pageButton { width: 250px; height: 50px; display: flex; align-items: center; margin-left: 20px; } #pageUp, #pageDown { width: 30px; height: 30px; margin-right: 10px; font-size: 5px; } .border, .currentDiv { width: 30px; height: 30px; line-height: 20px; text-align: center; margin-right: 10px; } .selectNum-select { width: 70px; height: 20px; margin-top: 15px; } .selectNum-input { display: flex; font-size: 10px; margin-top: 20px; } .pageNum { width: 30px; margin: 0 10px; } .btc { width: 50px; height: 20px; margin-top: 20px; margin-left: 20px; font-size: 10px; } .btc span { font-size: 10px; } </style> </head> <body> <div class="main"> <div class="tableScroll"> <table id="myTable"> <thead> <tr> <th style="width:60px;"><input type="checkbox" onchange="selAll()" id="cbAll"></th> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>人数</th> <th>性别</th> </tr> </thead> <tbody id="myTbody"> <tr> <td style="width:60px;"><input type="checkbox" onchange="sels()"></td> <td>1</td> <td>张三</td> <td>18</td> <td>5</td> <td>男</td> </tr> </tbody> </table> </div> <div class="tool"> <span id="page_s"> <select id="select_t" class="selectNum-select" onchange="pageNum()"> <option value="5">5条</option> <option value="10">10条</option> <option value="15">15条</option> <option value="20">20条</option> </select> </span> <div id="pageButton"></div> <div class="selectNum-button"></div> <p class="selectNum-input">前往 <input class="pageNum" type="number" oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" value="1" onkeyup="pageKey(event)"> 页</p> <button class="btc" onclick="return_bt()"><span>跳转</span></button> </div> </div> <script> // 初始化 // 获取table表格 var myTable = document.getElementById('myTbody'); // 获取页数按钮 var pageButton = document.getElementById('pageButton'); // 获取数组 var data = []; // 初始化页数 let page = 0; // 初始化列数为5 let num = 5; // 请求数据 $.ajax({ type: "get", url: "./js/new_file.json", data: {}, success: function(res) { console.log(res); data = res; renders(); } }) // 渲染函数 function renders() { // 设置每一页的全选状态为初始 document.querySelector('#cbAll').checked = false; // 渲染 let listStr = ""; // 循环i=页数*列数<页数+1乘以列数 for (let i = page * num; i < (page + 1) * num; i++) { // 如果数组的下标i不等于未定义 if (data[i] != undefined) { // 渲染数据 listStr += ` <tr> <td style="width:60px;"><input class="sports" type="checkbox" onchange="sels()"></td> <td>${data[i].id}</td> <td>${data[i].name}</td> <td>${data[i].age}</td> <td>${data[i].number}</td> <td>${data[i].xbie}</td> </tr> `; } } myTable.innerHTML = listStr; // 渲染左按钮 let butStr = `<button id="pageUp" onclick="prev()"><</button>`; // 通过数据的长度/列数=页数 let count = Math.ceil(data.length / num); for (let i = 0; i < count; i++) { if(page == i){ butStr += `<button type="button" class="border myBlue" onclick="changeData(${i})">${i + 1}</button>`; }else{ butStr += `<button type="button" class="border" onclick="changeData(${i})">${i + 1}</button>`; } } butStr += '<button id="pageDown" onclick="next()">></button>' pageButton.innerHTML = butStr; } // 上一页 function prev() { // 判断页数大于0 if (page > 0) { // 页数-- page--; // 调用函数 renders(); } else { // 弹窗 已是最后一页 alert("已是第一页"); } } // 下一页 function next() { let count = Math.ceil(data.length / num); // 如果页数<页数按钮 if (page < count - 1) { // 页数++ page++; // 调用函数 renders(); } else { alert("已是最后一页"); } } // 跳转指定页数 function changeData(i) { page = i; renders(); } // 前往第几页 function pageNum() { // 页数大于列数+1 page > num+1; // 调用函数 renders(); } // enter鼠标事件 function pageKey(e) { // 如果鼠标事件等于13 if(e.keyCode == 13){ // 实现跳转按钮 return_bt(); } } // 下拉条数 function pageNum(){ let set = $("#select_t").find("option:selected").val(); num = set; page = 0; renders(); } // // 跳转按钮 function return_bt(){ // 获取前往下标的值 let pageNum = document.getElementsByClassName("pageNum")[0].value; // 数量为整数 数据的长度除以列数 let count = Math.ceil(data.length / num); // 判断列数不能等于空并且不能未定义 if(pageNum != "" && pageNum != null){ // 判断列数大于0并且小于 if(pageNum > 0 && pageNum <count){ page = pageNum - 1; renders(); }else{ alert("未找到该页面"); } } } // 全选 function selAll(){ // 获取全选 var all = document.querySelector('#cbAll'); // 获取单选 var sports = document.querySelectorAll('.sports'); // 循环单选的长度 for(var i = 0; i<sports.length; i++){ // 选中单选下标=全选 sports[i].checked = all.checked; } } // 单选 function sels(){ // 获取全选 var all = document.querySelector('#cbAll'); // 获取单选 var sports = document.querySelectorAll('.sports'); // 状态为真 var flag = true; // 循环单选的长度 for (var i = 0; i < sports.length; i++) { // 没有判断到单选下标 if (!sports[i].checked) { // 状态就为假 flag = false; } } all.checked = flag; } </script> </body> </html>
