table分页的简单实现逻辑

最新推荐文章于 2023-03-28 16:56:40 发布

weixin_33730836

最新推荐文章于 2023-03-28 16:56:40 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/hrw/blog/1531691

本文介绍了一个具体的分页函数实现方法，详细展示了如何通过JavaScript动态生成页面分页导航栏，包括不同情况下的省略号展示逻辑，适用于总页数较多的场景。

为什么80%的码农都做不了架构师？>>>

//table分页函数
            showPageNum: function(pageNum, allPageNum) {  //pageNum点击第几页，allPageNum总页数
                $(".c_page .c_page_list").children().remove();
                for(var i=1;i<=allPageNum;i++){
                    var page = '<a href="###" data-index="'+i+'">'+i+'</a>';  
                    var ellipses = '<span class="c_page_ellipsis">...</span>';
                    if(allPageNum > 7){
                        if(pageNum < 5){
                            if(i<7 || i==allPageNum){
                                $(".c_page .c_page_list").append(page);
                            }
                            if(i==allPageNum-1){
                                $(".c_page .c_page_list").append(ellipses);
                            }  
                        }else if(pageNum >= allPageNum-3){
                            if(i > allPageNum-6 || i == 1){
                                $(".c_page .c_page_list").append(page);
                            }
                            if(i == 1){
                                $(".c_page .c_page_list").append(ellipses);
                            }
                        } else {
                            if(i == allPageNum){
                                $(".c_page .c_page_list").append(ellipses);
                                $(".c_page .c_page_list").append(page);
                            }
                            if(i == 1){
                                $(".c_page .c_page_list").append(page);
                                $(".c_page .c_page_list").append(ellipses);
                            }
                            if(pageNum+2 < allPageNum){
                                if(pageNum-2 <= i && i <= pageNum+2){
                                    $(".c_page .c_page_list").append(page);
                                }

                            }
                        } 
                    } else {
                        $(".c_page .c_page_list").append(page);
                    }
                    
                }
            },

转载于:https://my.oschina.net/hrw/blog/1531691