<!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>
扫一扫
07-01
1881
1881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
