java带省略号的分页,用客户端js实现带省略号的分页

复制代码 代码如下:

$(function(){

var n =$('.fenye >ul li:nth-child').length

var c=$(".fenye ul li").index($('.fenye ul li.thisclass'))

var setp1=c

var setp2=n-c; //后余

if(n>10){

if(c>2){

for (i=2;i

$(".fenye ul li").eq(i).hide()

}

}

for(y=c+5;y

$(".fenye ul li").eq(y).hide()

}

$(".fenye ul li").eq(n-3).text('...');

}else if(n==10){

$(".fenye ul li").eq(n-3).text('...');

}

})

效果图

73f7b528ff95b835b1e1bbf44538ecc2.png

``` # 定义当前页和总页数 $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>'); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值