加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 23:19:29 所属栏目:百科 来源:网络整理
导读:使用bootstrap-paginator.js 分页来进行ajax 异步分页请求 具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#one2").click(function () { g

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

具体的做法如下 :

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

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("

" + 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文件, 这也是最关键的一步

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读