javascript - jquery实现了一个分页，如何是现实固定的页码数，查过部分用页码省略号代替？

问题描述

问 题

点击切换的功能已经实现，考虑到如果内容条数很多的话，页码也很多，如果只显示固定页码数，超过部分用...代替。点击上一页和下一个，...位置可能变化，对于这个的规律不是很懂，请大家给我讲一下思路，谢谢！

解决方案

好久之前，参考论坛分页后端模板输出逻辑弄过一个.

        function makePage (total, page) {//生成页码
            var pages = [];

            function createPage(index){//单页码生成
                if(page==index){
                    pages.push('<strong>' + page + '</strong>');
                }else{
                    pages.push('<a class="page-link" href="javascript:void(0);">' + index + '</a>');
                }
            }
            if(total<=10){
                for(var i=1;i<=total;i++){
                    createPage(i);
                }
            }else{
                if(page <= 5) {//总页数大于10且当前页远离总页数(小于5)
                     for(var i = 1; i <=5; i++) {
                        createPage(i);
                     }
                    pages.push(' … <a class="page-link" href="javascript:void(0);">' + total + '</a>');
                }else if(page>=total-3){//总页数大于10且当前页接近总页数(小于总页数-3)
                    pages.push('<a class="page-link" href="javascript:void(0);">' + 1 + '</a> …');
                    for(var i=total-4;i<=total;i++){
                        createPage(i);
                    }
                }else{ //除开上面两个情况
                    pages.push('<a class="page-link" href="javascript:void(0);">' + 1 + '</a> … ');
                    for(var i=page-2;i<=page+2;i++){
                         createPage(i);
                    }
                     pages.push(' … <a class="page-link" href="javascript:void(0);">' + total + '</a>');
                }
            }

            if (page > 1 && total > 1) {// 上一页
                pages.unshift('<a class="js-page-change page-prev" href="javascript:void(0);">上页</a>');
            } else {
                pages.unshift('<span>上页</span>');
            }
            if (page < total && total > 1) {// 下一页
                pages.push('<a class="js-page-change page-next" href="javascript:void(0);">下页</a>');
            } else {
                pages.push('<span>下页</span>');
            }
            contentDom.html(tpl.replace("{pages}", pages.join(" ")));
        }

截取部分代码， 这个是生成当前页的总页数，规则是当页码不超过10的时候，全部显示，当大于10页时，根据当前页做处理。

如果当前页小于5， 则显示 前面五个页码+省略号+最后一页。

如果当前页是接近最后几页的，输出 首页码+省略号+后面几页（包括当前页）

剩下的情况，输出首页+省略号+中间几页（包含当前页）+省略号+最后一页。

好像挺复杂的= =，没整理过。参考下~

这篇关于javascript - jquery实现了一个分页，如何是现实固定的页码数，查过部分用页码省略号代替？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！