html文件

<meta charset="UTF-8">
<style>
    div {
        width: 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 {
        width: 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>