jQuery -分页代码整理

最新推荐文章于 2025-06-23 13:04:59 发布

zhuxufeifei

最新推荐文章于 2025-06-23 13:04:59 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript基础文章标签： js-分页

本文链接：https://blog.youkuaiyun.com/zhuxufeifei/article/details/82586383

javascript基础专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单分页插件，通过构建页面元素并填充歌手数据来展示分页效果。该插件可以计算总页数，并为每一页绑定点击事件以更新显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码部分：

 let pageSize = 12;
 let pageIndex = 0;
 //创建页码
 function builDatapage(list) {
 //获得总页数
        let total = Math.ceil(list.length / pageSize);
        console.log(total);
        for(let i =0 ; i< total; i++){
            let $pageItem = $('<li></li>');
            $pageItem.text(i+1);
            $pageItem.bind('click',function () {
                $tbody.html('');
                //切换样式
                let $active = $pageDiv.find('.cliced');
                $active.removeClass('cliced');
                console.log($(this));
                $(this).addClass('cliced');

                pageIndex = this.innerText - 1;
                fillSingers(list);
            });
            $pageItem.appendTo($pageDiv);
        }
        $pageDiv.find('li:first-child').addClass('cliced');
    }

生成数据页代码部分

    function fillSingers(singers) {
        let startIndex = pageIndex*pageSize;
        let endIndex = (pageIndex+1)*pageSize;
        let temp = singers.slice(startIndex , endIndex);
        for(let i = 0 ;i < temp.length; i++){
            let $tr = createSingers(i,temp[i]);
            $tr.appendTo($tbody);
        }
    }