twbs-pagination插件的实现条件查询的动态分页问题

云锦
2023-12-01

正常twbs-pagination实现一个分页使用其实很简单。

var pageSize = 15;		//每页数据数目
$.ajax({
        type: 'get',
        url: '/questions/total',
        dataType : 'json',
        success : function(data){
            if(data.flag===1){
		$('#page1').twbsPagination({
		        totalPages: Math.ceil(data.result/pageSize),   
		        visiblePages: 5,        //可见页码
		        first: '首页',
		        next: '下一页',
		        prev: '上一页',
		        last: '尾页',
		        onPageClick: function (event, page) {
		            initTypeList(page);
		        }
		});
    	     },
})
		

而我现在要此之上,再实现根据选择的条件而实现动态的分页显示。我写了了第二个分页插件函数实现。
根据点击的元素获取他的type进行查询。由于是点击进入函数后才获取到type值,由于是在函数中定义是局部变量,在调用initTypeList(page)进行页面加载数据时,获取不到。所以定义为全局变量。这是第一个坑点。

第二个是点击只有第一次有效,进行第二次点击获取其他的分类时,虽然能进入type,但是第二次及以后点击,无法再进入function。也就是无法刷新或重绘。这是因为动态总页数的问题。

官方文档是这么说的

动态总页数
这来自常见问题。例如-如何设置新的总页数?如何使用新的选项集初始化插件?如何刷新或重绘?
您可以通过两个简单的步骤来完成。调用destroy方法,然后使用新选项对其进行初始化。

所以问题很明显了。之前第一次的分页插件保留了,并没有销毁,哪怕点击了其他的,全局变量type也更改了。但是没有更新,还是之前的选项。综上。代码如下

 //根据条件筛选题目分页显示
$('#mainbox .dropdown-menu li a').click(function(){
	var type = $(this).text();
	//如果不定义为全局 initTypeList(page)里的type是undefined
	window.type = type;
	$.ajax({
            type: 'get',
            url: '/questions/typetotal',
            dataType : 'json',
            data :{
                "type" : type
            },
             success : function(data){
                if(data.flag===1){
                    //动态设置页数 如果不加,在进行选项更改时,无法进到新的分页实现
                    //条件查询,因为页数变了,调用destroy方法,然后使用新选项对其进行初始化。才可以实现刷新或重绘。否则加载页面数据onPageClick的函数并没有进入,也就没有initTypeList(page);
                    $('#page').twbsPagination('destroy');
                    $('#page').twbsPagination({
                        totalPages: Math.ceil(data.result/pageSize),   
                        visiblePages: 5,        //可见页码
                        first: '首页',
                        next: '下一页',
                        prev: '上一页',
                        last: '尾页',
                        onPageClick: function (event, page) {
                            //加载页面数据
                            // console.log('我进入初始化了');
                            initTypeList(page);
                        }
                    });
                }
            },
        })
    })
 类似资料: