html file
<meta charset="UTF-8">
<style>
div {
width: 800px;
height: 40px;
border: solid 1px #000;
margin: 30px auto;
}
</style>
<table border="1" cellspacing="0">
<script>
// used to prepare data
</script>
<div id="box1">
</div>
<div id="box2">
</div>
<thead>
<tr>
<Th> ID </ th>
<Th> Student ID </ th>
<Th> Student Name </ th>
<Th> Student Age </ th>
<Th> Student Sex </ th>
<Th> Student Class </ th>
<Th> student achievement </ th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="js.js"></script>
<script>
const firstName = 'Zhaoqian Sun Li Zhou Wu Zheng Wang Feng Chen Chu Wei Shen Han Yang Zhu Qin, especially the Ho Lu Xu Zhang Shi'
const laseName = 'helium, lithium, beryllium, boron carbonitride hydrogen oxyfluoride neon magnesium aluminum silicon, phosphorus and sulfur, sodium chloride, potassium calcium Ar'
const thirdName = '12345678 ninety'
const gender = 'men'
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: 'Home'
prev: 'Previous',
list: null,
next: 'Next'
last: 'Last'
},
pageInfo : {
pageNum: 96, // the current page
pageSize: 10, // number of bars per page
totalData: 1000, // total number of
totalPage: 100, // total number = roundup (total number of / the number of pieces per page)
}})
diaoy1.fn2()
diaoy1.dianj ()
let diaoy2 = new Pagination('#box2',{pageTag : {
first: 'Home'
prev: 'Previous',
list: null,
next: 'Next'
last: 'Last'
},
pageInfo : {
pageNum: 2, // current page
pageSize: 10, // number of bars per page
totalData: 1000, // total number of
totalPage: 100, // total number = roundup (total number of / the number of pieces per page)
} // hdhs: function (pageno) {
// console.log (pageno)
//}})
} Function (pageno) {
console.log (pageno)
let html = ` <tr>
<Th> ID </ th>
<Th> Student ID </ th>
<Th> Student Name </ th>
<Th> Student Age </ th>
<Th> Student Sex </ th>
<Th> Student Class </ th>
<Th> student achievement </ th>
</tr>`
for (i = let (pageno-1) * 10; i <pageno 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 code
<meta charset="UTF-8">
<style>
div {
width: 800px;
height: 40px;
border: solid 1px #000;
margin: 30px auto;
}
</style>
<table border="1" cellspacing="0">
<script>
// used to prepare data
</script>
<div id="box1">
</div>
<div id="box2">
</div>
<thead>
<tr>
<Th> ID </ th>
<Th> Student ID </ th>
<Th> Student Name </ th>
<Th> Student Age </ th>
<Th> Student Sex </ th>
<Th> Student Class </ th>
<Th> student achievement </ th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="js.js"></script>
<script>
const firstName = 'Zhaoqian Sun Li Zhou Wu Zheng Wang Feng Chen Chu Wei Shen Han Yang Zhu Qin, especially the Ho Lu Xu Zhang Shi'
const laseName = 'helium, lithium, beryllium, boron carbonitride hydrogen oxyfluoride neon magnesium aluminum silicon, phosphorus and sulfur, sodium chloride, potassium calcium Ar'
const thirdName = '12345678 ninety'
const gender = 'men'
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: 'Home'
prev: 'Previous',
list: null,
next: 'Next'
last: 'Last'
},
pageInfo : {
pageNum: 96, // the current page
pageSize: 10, // number of bars per page
totalData: 1000, // total number of
totalPage: 100, // total number = roundup (total number of / the number of pieces per page)
}})
diaoy1.fn2()
diaoy1.dianj ()
let diaoy2 = new Pagination('#box2',{pageTag : {
first: 'Home'
prev: 'Previous',
list: null,
next: 'Next'
last: 'Last'
},
pageInfo : {
pageNum: 2, // current page
pageSize: 10, // number of bars per page
totalData: 1000, // total number of
totalPage: 100, // total number = roundup (total number of / the number of pieces per page)
} // hdhs: function (pageno) {
// console.log (pageno)
//}})
} Function (pageno) {
console.log (pageno)
let html = ` <tr>
<Th> ID </ th>
<Th> Student ID </ th>
<Th> Student Name </ th>
<Th> Student Age </ th>
<Th> Student Sex </ th>
<Th> Student Class </ th>
<Th> student achievement </ th>
</tr>`
for (i = let (pageno-1) * 10; i <pageno 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>