jquery - 缩短easypagination页面显示长度

Question

我有一个代码，我使用 easypagination 进行分页过程，但我面临的问题是，当“elementsPerPage”属性减少到较小的数量时，分页的宽度会增加，但

我希望它在中间用点来限制，比如: << | < | 1 | 2 | 3 | ... | 8 | 9 | >>

目前是这样的: << | < | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | >>

如何在 easypagination 中实现这一点？这可能会有很大帮助。

谢谢你，

我的代码在这里:

.css

 #easyPaginate {width:300px;}
 #easyPaginate img {display:block;margin-bottom:10px;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

.html

<div id="easyPaginate">
    <img src="img/demo/surf1.jpg" />
    <img src="img/demo/surf2.jpg" />
    <img src="img/demo/surf3.jpg" />
    <img src="img/demo/surf4.jpg" />
    <img src="img/demo/surf5.jpg" />
    <img src="img/demo/surf6.jpg" />
    <img src="img/demo/surf7.jpg" />
    <img src="img/demo/surf8.jpg" />
    <img src="img/demo/surf9.jpg" />
    <img src="img/demo/surf10.jpg" />
    <img src="img/demo/surf11.jpg" />
    <img src="img/demo/surf12.jpg" />
    <img src="img/demo/surf13.jpg" />
    <img src="img/demo/surf14.jpg" />
    <img src="img/demo/surf15.jpg" />
    <img src="img/demo/surf16.jpg" />
    <img src="img/demo/surf17.jpg" />
    <img src="img/demo/surf18.jpg" />
</div>

.js

$('#easyPaginate').easyPaginate({
    paginateElement: 'img',
    elementsPerPage: 3,
    effect: 'climb'
});

Answer 1

您可以使用旧插件(截至 2013 年 10 月 22 日，星期二) http://www.jqueryscript.net/demo/User-Friendly-Pagination-Plugin-With-jQuery-Bootstrap-easyPaginate/