使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求

具体的做法如下 ：

首先定义一个异步提交请求的ajax 函数，其完整的函数如下：

rush:js;"> 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); // 更新局部<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> 

  var totalpage = $("#totalpage").val(); //<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>号 
  var curtpage = $("#curtpage").val(); // 总<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>号 
  if (curtpage && totalpage) { 
    cpage = curtpage; 
    tpage = totalpage; 
  } 

  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play(cpage,tpage); //<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/pinglun/" target="_blank" class="keywords">评论</a> 

},error: function () { 
  alert("加载失败！请稍后重试！"); 
} 

});
}

/ obj: ajax 返回的html 数据 /
// 更新局部页面
function changeModel(obj) {

var comt = $(".Comments");
comt.replaceWith("

" + obj + "

");
}

/ 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文件， 这也是最关键的一步

rush: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了。运行截图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。