分页器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .pagination{
            width:600px;
            cursor:pointer;
            height:80px;
            border:2px solid peru;
            margin:30px auto;
            padding-left:200px;
        }
        .pagination > span,.pagination > ul > li {
            float:left;
            line-height:80px;
            padding:0 5px;
        }

        .pagination > ul > li{
            list-style:none;
        }
        .pagination > ul > li.active{
            color:rgb(24, 0, 243);
        }
        table{
            width:800px;
            margin:0 auto;
            text-align:center;
            border:1px solid #333;
        }
        table > tbody > tr:nth-child(odd){
            background-color: steelblue;
        }
        table > tbody > tr:nth-child(even){
            background-color: tan;
        }
        table > tbody > tr{
            cursor:pointer;
        }
        table > tbody > tr:hover{
            background-color: #ccc;
            color:#fff;
        }
    </style>
</head>
<body>
<div class="pagination">
    <span class="first">Home</span>
    <span class="prev">prev</span>
    <ul class="pageList">
    </ul>
    <span class="next">next</span>
    <span class="last">Tail</span>
</div>
<table cellspacing="0">
    <thead>
        <tr>
            <th>Number</th>
            <th>ID</th>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
            <th>class</th>
            <th>operation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>aaa</td>
            <td>M</td>
            <td>11</td>
            <td>2002</td>
            <td>
                <button>edit</button>
                <button>delete</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>bbb</td>
            <td>F</td>
            <td>22</td>
            <td>2020</td>
            <td>
                <button>edit</button>
                <button>delete</button>
            </td>
        </tr>
    </tbody>
</table>
</body>
<script>
    var pageList=document.querySelector('.pageList')
    var prev=document.querySelector('.prev')
    var next=document.querySelector('.next')
    var first=document.querySelector('.first')
    var last=document.querySelector('.last')
    var tbody=document.querySelector('tbody')

    var userList=[]
    var str1='张王刘马孙赵钱吴'
    var str2='一二三四五六七八九十'
    var str3='男女'
    for(var i=0;i<123;++i){
        userList[userList.length]={
            id:i+1,
            name:str1[randomRange(0,7)]+str2[randomRange(0,9)],
            gender:str3[randomRange(0,1)],
            age:randomRange(18,44),
            class:randomRange(2000,2010)
        }
    }
    var pageNumber=Math.ceil(userList.length/11)
    var frg=document.createDocumentFragment()
    for(var i=1;i<=pageNumber;i++){
        var li=document.createElement('li')
        li.innerHTML=i
        li.dataset.index=i
        if(i===1){li.className="active"}
        li.onclick=function(){
            console.log(this.dataset.index,typeof this.dataset.index)
            currentPage=this.dataset.index-0
            bindHTML()
        }
        frg.appendChild(li)
    }
    pageList.append(frg)

    var currentPage=1;
    function bindHTML(){
        // [0,10] 1
        // [11,21] 2 
        // [22,32] 3
        // [(n-1)*11, n*11-1]
        var bindList=userList.slice((currentPage-1)*11,currentPage*11)
        console.log(bindList)
        var str=''
        bindList.forEach(function(value,index,array){
            str+=`
            <tr>
                <td>${index+1}</td>
                <td>${value.id}</td>
                <td>${value.name}</td>
                <td>${value.age}</td>
                <td>${value.gender}</td>
                <td>${value.class}</td>
                <td>
                    <button>edit</button>
                    <button>delete</button>
                </td>
            </tr>
            `
            tbody.innerHTML=str
            changeCurrent()
        })
    }
    bindHTML()
    next.onclick=function(){
        if(currentPage === pageNumber){return;}
        ++currentPage
        bindHTML()
    }
    prev.onclick=function(){
        if(currentPage === 1){return;}
        currentPage--
        bindHTML()
    }
    console.log(first,last)
    first.onclick=function(){
        if(currentPage === 1){return;}
        currentPage=1
        bindHTML()
    }
    last.onclick=function(){
        if(currentPage === pageNumber){return;}
        currentPage=pageNumber
        bindHTML()
    }
    function changeCurrent(){
        for(var i=0;i<pageList.children.length;++i){
            pageList.children[i].className=''
        }
        pageList.children[currentPage-1].className="active"
    }
    document.onselectstart=function(event){event.preventDefault();}
</script>
</html>