jquery ajax 調用kkpager插件 異步加載從新生成分頁後,點擊頁數仍是跟首次加載同樣

kkpager的用法網上有不少,能夠百度的到。javascript

可是在調用動態數據的時候發現兩個問題html

1.Ajax數據變化可是頁碼不變的問題,方法來自網上java

 

2.按查詢條件從新生成數據和分頁,點擊分頁事件後totalpage 和totalrecord 和沒加條件查詢的數據同樣。ajax

 

主要緣由是由於客戶端不會幫你保留總頁碼數和總條數,json

在使用kkpager插件的頁面,放兩個hidden標籤。this

而後在按查詢條件從新生成數據時,用hidden按鈕綁定你的總頁數和總條數。url

下面是ajax 調用後臺數據,把返回的總頁數和總條數存放在hidden。spa

 $.ajax({
        type: "get",
        dataType: "json",
        url: urlStr2,
        success: totalOnsuccess
    });

//根據返回的total 加載數據和分頁
function totalOnsuccess(data) {
    var resInfoArray = eval(data);
     
    totalRecords = resInfoArray[0].TOTAL;
 
    totalPage = Math.ceil(totalRecords / pageSize); //向上取整  
    $("#totalpages").val(totalPage); //綁定獲取的總頁數
    $("#totalRecords").val(totalRecords);//綁定獲取的總條數
 
    if (!pageNo) {
        pageNo = 1;
    }
    if (totalRecords > 0) {
      
        FkeepPage(pageNo, totalPage, totalRecords); //調用分頁插件
    }
    else {
        $("#kkpager").html("<div style='text-align:center'>沒有符合條件的數據</div>")

    }
    queryInfoTable(tablename, pageSize, pageNo, where); //加載表格數據

}

/*
pageNo:當前頁
totalPage:總頁數
totalRecords:總條數
*/
function FkeepPage(pageNo, totalPage, totalRecords) {
    
    //生成分頁
    //有些參數是可選的,好比lang,若不傳有默認值
    kkpager.generPageHtml({
        pno: pageNo,
        //總頁碼
        total: totalPage, 
        //總數據條數
        totalRecords: totalRecords,
        mode: 'click',//默認值是link,可選link或者click
        click: function (n) {
           
            // do something 
            // this.selectPage(n); //默認的,由於不能符合個人要求改爲下面的

this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val());
 queryInfoTable(tablename, pageSize, n, where); //加載表格數據
            return false; } /* ,lang : { firstPageText : '首頁', firstPageTipText : '首頁', lastPageText : '尾頁', lastPageTipText : '尾頁', prePageText : '上一頁', prePageTipText : '上一頁', nextPageText : '下一頁', nextPageTipText : '下一頁', totalPageBeforeText : '共', totalPageAfterText : '頁', currPageBeforeText : '當前第', currPageAfterText : '頁', totalInfoSplitStr : '/', totalRecordsBeforeText : '共', totalRecordsAfterText : '條數據', gopageBeforeText : '&nbsp;轉到', gopageButtonOkText : '肯定', gopageAfterText : '頁', buttonTipBeforeText : '第', buttonTipAfterText : '頁' }*/ },true);//加true 默認沒有,由於頁碼數不更新,因此加上了
}

 

後面的是修改kkpager.js 插件

主要就是把裏面的code

//不刷新頁面直接手動調用選中某一頁碼
selectPage: function (n) {  
this.generPageHtml(this._config,true);
},

  

改爲

//不刷新頁面直接手動調用選中某一頁碼
selectPage: function (n, b, c) { 
this._config['pno'] = n;
this._config['total'] = b;
this._config['totalRecords'] = c;
this.generPageHtml(this._config,true);
},
相關文章
相關標籤/搜索