正常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);
}
});
}
},
})
})