使用bootstrap-paginator.js 分頁來進行ajax 異步分頁請求示例

2019-11-19 17:12:59

字體：大中小

來源：轉載

供稿：網友

使用bootstrap-paginator.js 分頁來進行ajax 異步分頁請求

具體的做法如下：

首先定義一個異步提交請求的ajax 函數，其完整的函數如下：

var nid= $("#lbnid").val(); // 獲取當前新聞編號 var cpage = 1; // 當前頁面號 var tpage = 10; // 總頁面數   function getPaging() {   getComment(cpage); //獲取新聞評論 }  //點擊查看新聞評論 $("#one2").click(function () {   getPaging(); });  //獲取新聞評論評論 function getComment(page) {   $.ajax({     type: "get",     data: nid,     async: "false",     url: "/comment/GetComment?nid=" + nid+ "&page=" + page,     success: function (info) {        changeModel(info); // 更新局部頁面        var totalpage = $("#totalpage").val(); //當前頁面號       var curtpage = $("#curtpage").val(); // 總頁面號       if (curtpage && totalpage) {         cpage = curtpage;         tpage = totalpage;       }        display(cpage, tpage); //顯示評論      },      error: function () {       alert("加載失敗！請稍后重試！");     }    }); }  /*  obj: ajax 返回的html 數據 */ // 更新局部頁面  function changeModel(obj) {    var comt = $(".Comments");   comt.replaceWith("<div class=Comments>" + obj + "</div>"); }   /* curreentpage: 當前頁面號； tpage: 總的頁面數 */ //顯示新聞評論 function display(curtpage, tpage) {   var options = {     bootstrapMajorVersion: 3,//版本     currentPage: curtpage, //當前頁數     numberOfPages: 10,//設置顯示的頁碼數     totalPages: tpage, //總頁數     itemTexts: function (type, page, current) {       switch (type) {         case "first":           return "首頁";         case "prev":           return "上一頁";         case "next":           return "下一頁";         case "last":           return "末頁";         case "page":           return page;       }     },   }   $("#page").bootstrapPaginator(options); }

接下來就是修改原來的 bootstrap-paginator.js文件，這也是最關鍵的一步

onPageClicked: function (event, originalEvent, type, page) {    //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return    var currentTarget = $(event.currentTarget);    switch (type) {   case "first":     currentTarget.bootstrapPaginator("showFirst");     getComment(page); // 自定義的獲取新聞評論的方法，一寶要記得添加這個自定義的函數            break;   case "prev":     currentTarget.bootstrapPaginator("showPrevious");     getComment(page);     break;   case "next":     currentTarget.bootstrapPaginator("showNext");     getComment(page);     break;   case "last":     currentTarget.bootstrapPaginator("showLast");     getComment(page);     break;   case "page":     currentTarget.bootstrapPaginator("show", page);     getComment(page);     break;   }  },

接下來就OK了。運行截圖如下：