js案例-分页

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>