jq:分页加省略号

背景:项目中需要重写一个分页功能
代码:

 //重绘分页
            var redrawPaging = function (pageSize, pageIndex, total) {
                //debugger
                var num = parseInt(total / pageSize) + (total % pageSize == 0 ? 0 : 1);
                Config.pageCount = num;
                Config.pageIndex = pageIndex;
                function createPage(index) { //单页码生成
                    if (pageIndex == index) {
                        //当前页(或选中)样式 多了个selected(换背景色字体色的)
                        html += "<li><a href=\"javascript:void(0)\" onclick=\"Helper.pageTo(this," + pageIndex + ")\" class=\"" + 'search-paging-select' + "\">" + pageIndex + "</a></li>";
                    } else {
                        html += "<li><a href=\"javascript:void(0)\" onclick=\"Helper.pageTo(this," + index + ")\" class=\"" + 'search-paging-max' + "\">" + index + "</a></li>";
                    }
                }
                //重绘
                var html = "";
                var preClass = "";
                var nextClass = "";
                if (pageIndex == 1)
                    preClass = "search-paging-disable";
                if (pageIndex == num)
                    nextClass = "search-paging-disable";
                html += "<li><a href=\"javascript:void(0)\" onclick=\"Helper.pageTo(this,-1)\" class=\"" + preClass + "\">&lt;</a></li>";
                //var showNum = 10;//显示页码数
                if (num == 0) {
                    $('.search-paging').hide()
                } else {
                    $('.search-paging').show()
                }
                if (num <= 10) {
                    for (let i = 0; i <= num; i++) {
                        createPage(i);
                    }
                } else {
                    if (pageIndex <= 4) { //总页数大于10且当前页远离总页数(小于4)
                        for (var i = 1; i <= 4 + 1; i++) { //显示1-5
                            createPage(i);
                        }
                        html += "<li><a href=\"javascript:void(0)\" class=\"" + 'search-paging-max' + "\" >...</a></li>";
                        //点后面 生成最后一个页数
                        for (var i = num - 3; i <= num; i++) { //显示1-5
                            createPage(i);
                        }
                        /*createPage(num);*/

                    } else if (pageIndex > num - 5) { //总页数大于10且当前页接近总页数(大于总页数-5)
                        //第一页
                        //createPage(1);
                        for (var i = 1; i <= 4; i++) {
                            createPage(i);
                        }
                        html += "<li><a href=\"javascript:void(0)\"  class=\"" + 'search-paging-max' + "\">...</a></li>";
                        //生成最后5个页数
                        for (var i = num - 4; i <= num; i++) {
                            createPage(i);
                        }
                    } else { //除开上面两个情况 当前页在中间
                        //页数1
                        createPage(1);
                        html += "<li><a href=\"javascript:void(0)\"  class=\"" + 'search-paging-max' + "\">...</a></li>";
                        //生成当前页和 前跟后3个页数
                        for (var i = pageIndex - 2; i <= pageIndex + 3; i++) {
                            createPage(i);
                        }
                        html += "<li><a href=\"javascript:void(0)\"  class=\"" + 'search-paging-max' + "\">...</a></li>";
                        //最后一个页数
                        createPage(num);
                    }
                }
                html += "<li><a href=\"javascript:void(0)\" onclick=\"Helper.pageTo(this,-2)\" class=\"" + nextClass + "\">&gt;</a></li>";
                $("#paging").html(html);
                $("#tbPageIndex").val(pageIndex);
            }
//调用
 redrawPaging(pageSize, pageIndex, total);

效果:
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
``` # 定义当前页和总页数 $current_page = 1; $total_pages = 10; # 定义分页器最多显示的页码数 $max_pages = 5; # 计算分页器起始页码和结束页码 $start_page = $current_page - floor($max_pages / 2); if ($start_page < 1) { $start_page = 1; } $end_page = $start_page + $max_pages - 1; if ($end_page > $total_pages) { $end_page = $total_pages; $start_page = $end_page - $max_pages + 1; if ($start_page < 1) { $start_page = 1; } } # 输出分页器 echo '<ul class="pagination">'; if ($current_page > 1) { echo '<li><a href="?page=' . ($current_page - 1) . '">上一页</a></li>'; } if ($start_page > 1) { echo '<li><a href="?page=1">1</a></li>'; if ($start_page > 2) { echo '<li>...</li>'; } } for ($i = $start_page; $i <= $end_page; $i++) { if ($i == $current_page) { echo '<li class="active"><a href="#">' . $i . '</a></li>'; } else { echo '<li><a href="?page=' . $i . '">' . $i . '</a></li>'; } } if ($end_page < $total_pages) { if ($end_page < $total_pages - 1) { echo '<li>...</li>'; } echo '<li><a href="?page=' . $total_pages . '">' . $total_pages . '</a></li>'; } if ($current_page < $total_pages) { echo '<li><a href="?page=' . ($current_page + 1) . '">下一页</a></li>'; } echo '</ul>'; ``` 上面的代码是php代码,如果需要转换为jq代码,可以按照以下步骤进行: 1. 将php变量改为jq变量,例如将"$current_page"改为"current_page"; 2. 将php的"echo"改为jq的"$().append()"; 3. 将php的"."改为jq的"+"; 4. 将php的";"改为jq的";"或者省略掉。 转换后的代码如下所示: ``` # 定义当前页和总页数 var current_page = 1; var total_pages = 10; # 定义分页器最多显示的页码数 var max_pages = 5; # 计算分页器起始页码和结束页码 var start_page = current_page - Math.floor(max_pages / 2); if (start_page < 1) { start_page = 1; } var end_page = start_page + max_pages - 1; if (end_page > total_pages) { end_page = total_pages; start_page = end_page - max_pages + 1; if (start_page < 1) { start_page = 1; } } # 输出分页器 $('ul.pagination').empty(); if (current_page > 1) { $('ul.pagination').append('<li><a href="?page=' + (current_page - 1) + '">上一页</a></li>'); } if (start_page > 1) { $('ul.pagination').append('<li><a href="?page=1">1</a></li>'); if (start_page > 2) { $('ul.pagination').append('<li>...</li>'); } } for (var i = start_page; i <= end_page; i++) { if (i == current_page) { $('ul.pagination').append('<li class="active"><a href="#">' + i + '</a></li>'); } else { $('ul.pagination').append('<li><a href="?page=' + i + '">' + i + '</a></li>'); } } if (end_page < total_pages) { if (end_page < total_pages - 1) { $('ul.pagination').append('<li>...</li>'); } $('ul.pagination').append('<li><a href="?page=' + total_pages + '">' + total_pages + '</a></li>'); } if (current_page < total_pages) { $('ul.pagination').append('<li><a href="?page=' + (current_page + 1) + '">下一页</a></li>'); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值