twbs-pagination插件的實現條件查詢的動態分頁問題

正常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);
                        }
                    });
                }
            },
        })
    })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章