<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 20px;
}
.all {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/*偷懒才用的id*/
#inputs input {
width: 100px;
height: 50px;
background-color: white;
}
#table {
width: 90%;
}
tr {
width: 100%;
}
td {
text-align: center;
width: 50%;
height: 10vh;
border: 1px solid black;
}
#inputs{
display: flex;
}
#inputs li{
display: flex;
border: 1px solid #000000;
align-items: center;
justify-content:center;
width: 35px;
height: 35px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<div id="table">
</div>
<ul id="inputs">
</ul>
</div>
<script type="text/javascript">
let sumber = ''
var strs = [
{
"id": 1,
"pwd": 1
},
{
"id": 2,
"pwd": 2
},
{
"id": 3,
"pwd": 3
},
{
"id": 4,
"pwd": 4
},
{
"id": 5,
"pwd": 5
},
{
"id": 6,
"pwd": 6
},
{
"id": 7,
"pwd": 7
},
{
"id": 8,
"pwd": 8
},
{
"id": 9,
"pwd": 9
},
{
"id": 10,
"pwd": 10
},
{
"id": 11,
"pwd": 11
},
{
"id": 12,
"pwd": 12
},
];
var len = 3;//假设规定每页显示长度为3
//确认该集合会被分成几页,分成几页就代表需要几个页面按钮,封装封装方便多次运用
function limits() {
var countLim = Math.ceil(strs.length / len); //余数也算是一页,这里用向上取整
//确认页面按钮个数,进行循环显示到页面上
document.getElementById("inputs").innerHTML = ''; //清空一下
for (var i = 1; i <= countLim; i++) {
if(i===1){
document.getElementById("inputs").innerHTML += `<li><a id='previousPage' οnclick="get1()"><</a></li><li><a οnclick="getadd(${i})">${i}</a></li>`
}else if(i===countLim){
document.getElementById("inputs").innerHTML += `<li><a οnclick="getadd(${i})">${i}</a></li><li><a id='previousPage' οnclick="get2(${countLim})">></a></li>`
}else{
document.getElementById("inputs").innerHTML += `<li><a οnclick="getadd(${i})">${i}</a></li>`; //每个页面按钮都绑定上一个点击事件
}
}
}
//点击页签事件
function getadd(val){
tablestr(val)
liminputcolor(val)
}
//点击向左箭头
function get1(){
if(sumber>1){
let b = sumber-1
tablestr(b)
liminputcolor(b)
}else{
tablestr(1)
liminputcolor(1)
}
}
点击向右箭头
function get2(val){
if(sumber<val){
let b = sumber+1
tablestr(b)
liminputcolor(b)
}else if(sumber === val){
tablestr(sumber)
liminputcolor(sumber)
}
}
var choose = 0; //创建一个全局变量用来保存当前处于第几个页面
//点击按钮获取当前按钮的值进行选择当前table是第几页数据
function limitinput(ids) {
choose = ids.value;
tablestr(choose); //刷新table数据
limits(); //刷新页面按钮
ids.style.backgroundColor = 'red'; //当前点击的页面按钮背景颜色改变为红色
liminputcolor(choose); //页面按钮变色
}
//通过当前页面按钮和页面数据长度将数据放进table内,封装封装!!!必须封装
function tablestr(num) { //num是指当前哪个页面
sumber = num
var num1 = (num - 1) * len; //确定循环开始的集合下标
var num2 = num * len - 1; //确定循环结束的结束下标
document.getElementById("table").innerHTML = ''; //清空一下
for (var i = num1; i<=num2;i++){
var str = '';
for (var h in strs[i]){ //遍历集合
str = `
<div>${strs[i]['pwd']}</div>
`;
}
document.getElementById("table").innerHTML += str;//每循环一次添加一条数据
}
}
//设置当前选中的页签颜色样式
function liminputcolor(choose) {
let dom=document.getElementById("inputs").childNodes;
for(let item of dom){
item.style.backgroundColor = "";
}
document.getElementById("inputs").childNodes[choose].style.backgroundColor = "red";
}
//初始化,当前页面显示为第一页
limits(); //页面按钮生成
document.getElementById("inputs").childNodes[1].style.backgroundColor = "red"; //第一个按钮的背景颜色为红色
tablestr(1); //table数据显示
</script>
</body>
</html>