原生js实现分页

最新推荐文章于 2023-08-24 01:10:22 发布

QSZHT

最新推荐文章于 2023-08-24 01:10:22 发布

阅读量330

点赞数

分类专栏： javascript 文章标签： js html

本文链接：https://blog.csdn.net/weixin_42380671/article/details/104731872

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码

<body onload="page(pageCur)">
    <div class="main">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>标题</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody id="box">

            </tbody>
        </table>
        <div class="pbox">
            <ul id="page" class="page">

            </ul>
        </div>
    </div>
</body>
<script>
    var arr=[
        {name:'ddd1',title:'ccc',content:'8979787'},
        {name:'ddd2',title:'ccc',content:'8979787'},
        {name:'ddd3',title:'ccc',content:'8979787'},
        {name:'ddd4',title:'ccc',content:'8979787'},
        {name:'ddd5',title:'ccc',content:'8979787'},
        {name:'ddd6',title:'ccc',content:'8979787'},
        {name:'ddd7',title:'ccc',content:'8979787'},
        {name:'ddd8',title:'ccc',content:'8979787'},
        {name:'ddd9',title:'ccc',content:'8979787'},
        {name:'ddd10',title:'ccc',content:'8979787'},
        {name:'ddd11',title:'ccc',content:'8979787'},
        {name:'ddd12',title:'ccc',content:'8979787'},
        {name:'ddd13',title:'ccc',content:'8979787'},
        {name:'ddd14',title:'ccc',content:'8979787'},
        {name:'ddd15',title:'ccc',content:'8979787'},
        {name:'ddd16',title:'ccc',content:'8979787'},
        {name:'ddd17',title:'ccc',content:'8979787'},
        {name:'ddd18',title:'ccc',content:'8979787'},
        {name:'ddd19',title:'ccc',content:'8979787'},
        {name:'ddd20',title:'ccc',content:'8979787'},
        {name:'ddd21',title:'ccc',content:'8979787'},
        {name:'ddd22',title:'ccc',content:'8979787'},
        {name:'ddd23',title:'ccc',content:'8979787'},
        {name:'ddd24',title:'ccc',content:'8979787'},
        {name:'ddd25',title:'ccc',content:'8979787'},
        {name:'ddd26',title:'ccc',content:'8979787'},
        {name:'ddd27',title:'ccc',content:'8979787'},
        {name:'ddd28',title:'ccc',content:'8979787'},
        {name:'ddd29',title:'ccc',content:'8979787'},
        {name:'ddd30',title:'ccc',content:'8979787'},
        {name:'ddd31',title:'ccc',content:'8979787'},
        {name:'ddd32',title:'ccc',content:'8979787'},
        {name:'ddd33',title:'ccc',content:'8979787'},
        {name:'ddd34',title:'ccc',content:'8979787'},
        {name:'ddd35',title:'ccc',content:'8979787'},
        {name:'ddd36',title:'ccc',content:'8979787'},
        {name:'ddd37',title:'ccc',content:'8979787'},
        {name:'ddd38',title:'ccc',content:'8979787'},
        {name:'ddd39',title:'ccc',content:'8979787'},
        {name:'ddd40',title:'ccc',content:'8979787'}
    ];
    var pageNo=10;//每页10条数据
    var pageSize=arr.length;//总共多少条数据
    var pageCur=1;//当前的页码
    var str='';
    var ym='';
    //分页
    function page(n) {
        pageCur=n;
        var x=(pageCur-1)*10;
        var y=parseInt(pageNo)*parseInt(pageCur);
        if(str.length>0){
            str='';
        }
        for (var i=x;i<y;i++) {
            var x=i+1;
            str+='<tr><td>'+x+'</td><td>'+arr[i].name+'</td><td>'+arr[i].title+'</td><td>'+arr[i].content+'</td></tr>';
        };
        document.getElementById('box').innerHTML=str;
        clearPage(n);

    }
    //生成页码
    function pages() {
        for (var i=1;i<=pageSize/pageNo;i++) {
            ym+=`<li onclick="page(${i})">${i}</li>`
        };
        document.getElementById('page').innerHTML=ym;
    }
    pages();
    //页码的选中状态
    function clearPage(n) {
        var list=document.querySelectorAll('li');
        var index=n-1;
        for(var i=0;i<list.length;i++){
            if(list[i].className=='active'){
                list[i].className=''
            }
            list[index].className='active';
        }
    }
</script>
</html>