正常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(){
$('#page1').css("display","none"); //將全部列表的分頁隱藏
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){
//動態設置頁數 如果不加,在進行選項更改時,無法進到新的分頁實現
//條件查詢,因爲頁數變了,需要先將原來的destory。纔可以實現刷新或重繪。否則加載頁面數據onPageClick的函數並沒有進入,也就沒有initTypeList(page);
$('#page2').twbsPagination('destroy');
$('#page2').twbsPagination({
totalPages: Math.ceil(data.result/pageSize),
visiblePages: 5, //可見頁碼
first: '首頁',
next: '下一頁',
prev: '上一頁',
last: '尾頁',
onPageClick: function (event, page) {
//加載頁面數據
// console.log('我進入初始化了');
initTypeList(page);
}
});
}
},
})
})