使用jquery.twbsPagination分页时遇到的问题

最新推荐文章于 2023-07-02 16:50:23 发布

jennypypy

最新推荐文章于 2023-07-02 16:50:23 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： js bootstrap pagination 文章标签： js bootstrap pagination

本文链接：https://blog.youkuaiyun.com/panying0903/article/details/41276809

js 同时被 3 个专栏收录

30 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

pagination

1 篇文章

订阅专栏

本文讨论了如何解决jQuery twbsPagination插件在使用ajax调用时，实际的totalpages改变时，分页效果中的总页数并未自动刷新的问题，并提供了一个解决方案。通过在使用twbsPagination之前移除并重新加入DOM树中的分页元素，可以实现总页数的自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址：http://esimakin.github.io/twbs-pagination/

jquery.twbsPagination 是一个适用于bootstrap 或其他风格的分页插件。

使用如下：

<script type="text/javascript" src="js/jquery.twbsPagination.min.js"></script>

<div id="pagination_box" class="pull-right" id="paging">
   <ul id="pagination_zc" class="pagination">
   </ul>        	
</div>

$('#pagination_zc').twbsPagination({
	totalPages: totalPages,
	visiblePages: visiblePages > 5 ? 5 : visiblePages,
	startPage: 1,
	first: "首页",
	prev: "上一页",
	next: "下一页",
	last: "未页",
	href: "#",
	onPageClick: function (event, page) {
		var page_para = page_url + "&page=" + page;
		$.ajax({
			url: "list.php",
			type: "GET",
			dataType: "json",
			data: page_para,
			success: function(data) {
				if(data.code == 0){
					//todosomething
				}else{
					//todosomething
				}
			}
		});
	}
});

但是有一个问题：在使用ajax调用的时候，实际的totalpages改变时，分页效果中的总页数并没有自动刷新。page绑定的事件没有问题。

解决方法如下（比较笨）：（先移除然后重新加入DOM树中）在使用twbsPagination之前做。

$('#pagination_zc').remove();
$("#pagination_box").append('<ul id="pagination_zc" class="pagination"></ul>');

if(page_size!=data.totalPag){
     $("#pagination_box").html('<ul id="xxxxxx" class="pagination-sm"></ul>');
}