html文件
<meta charset="UTF-8">
<style>
div {
800px;
height: 40px;
border: solid 1px #000;
margin: 30px auto;
}
</style>
<table border="1" cellspacing="0">
<script>
// 用来准备数据
</script>
<div id="box1">
</div>
<div id="box2">
</div>
<thead>
<tr>
<th>序号</th>
<th>学生ID</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生班级</th>
<th>学生成绩</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="js.js"></script>
<script>
const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章'
const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙'
const thirdName = '一二三四五六七八九十'
const gender = '男女'
const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a
let theadObj = document.querySelector('thead')
const tableDataArr = []
for (let i = 0; i <= 1000; i++) {
tableDataArr.push({
id: i + 1,
name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)],
age: fn(16, 30),
gender: gender[fn(0, 1)],
class: fn(1910, 1920),
score: fn(40, 100)
})
}
console.log(tableDataArr[1])
let diaoy1 = new Pagination('#box1',{pageTag : {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
},
pageInfo : {
pageNum: 96, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}})
diaoy1.fn2()
diaoy1.dianj()
let diaoy2 = new Pagination('#box2',{pageTag : {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
},
pageInfo : {
pageNum: 2, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}//,hdhs:function(pageNum) {
// console.log(pageNum)
//}})
},function(pageNum){
console.log(pageNum)
let html = ` <tr>
<th>序号</th>
<th>学生ID</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生班级</th>
<th>学生成绩</th>
</tr>`
for(let i =( pageNum-1 )*10; i < pageNum*10 ; i++){
html += `
<tr>
<th>${i}</th>
<th>${tableDataArr[i].id}</th>
<th>${tableDataArr[i].name}</th>
<th>${tableDataArr[i].age}</th>
<th>${tableDataArr[i].gender}</th>
<th>${tableDataArr[i].class}</th>
<th>${tableDataArr[i].score}</th>
</tr>
`
}
theadObj.innerHTML = html
})
diaoy2.fn2()
diaoy2.dianj()
</script>
js代码
<meta charset="UTF-8">
<style>
div {
800px;
height: 40px;
border: solid 1px #000;
margin: 30px auto;
}
</style>
<table border="1" cellspacing="0">
<script>
// 用来准备数据
</script>
<div id="box1">
</div>
<div id="box2">
</div>
<thead>
<tr>
<th>序号</th>
<th>学生ID</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生班级</th>
<th>学生成绩</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="js.js"></script>
<script>
const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章'
const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙'
const thirdName = '一二三四五六七八九十'
const gender = '男女'
const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a
let theadObj = document.querySelector('thead')
const tableDataArr = []
for (let i = 0; i <= 1000; i++) {
tableDataArr.push({
id: i + 1,
name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)],
age: fn(16, 30),
gender: gender[fn(0, 1)],
class: fn(1910, 1920),
score: fn(40, 100)
})
}
console.log(tableDataArr[1])
let diaoy1 = new Pagination('#box1',{pageTag : {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
},
pageInfo : {
pageNum: 96, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}})
diaoy1.fn2()
diaoy1.dianj()
let diaoy2 = new Pagination('#box2',{pageTag : {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
},
pageInfo : {
pageNum: 2, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}//,hdhs:function(pageNum) {
// console.log(pageNum)
//}})
},function(pageNum){
console.log(pageNum)
let html = ` <tr>
<th>序号</th>
<th>学生ID</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生班级</th>
<th>学生成绩</th>
</tr>`
for(let i =( pageNum-1 )*10; i < pageNum*10 ; i++){
html += `
<tr>
<th>${i}</th>
<th>${tableDataArr[i].id}</th>
<th>${tableDataArr[i].name}</th>
<th>${tableDataArr[i].age}</th>
<th>${tableDataArr[i].gender}</th>
<th>${tableDataArr[i].class}</th>
<th>${tableDataArr[i].score}</th>
</tr>
`
}
theadObj.innerHTML = html
})
diaoy2.fn2()
diaoy2.dianj()
</script>