最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
时间:2017-06-13 编辑:简简单单 来源:一聚教程网
首先定义一个异步提交请求的ajax 函数,其完整的函数如下:
代码如下 | 复制代码 |
varnid= $("#lbnid").val();// 获取当前新闻编号 varcpage = 1;// 当前页面号 vartpage = 10;// 总页面数
functiongetPaging() { getComment(cpage);//获取新闻评论 }
//点击查看新闻评论 $("#one2").click(function() { getPaging(); });
//获取新闻评论评论 functiongetComment(page) { $.ajax({ type:"get", data: nid, async:"false", url:"/comment/GetComment?nid="+ nid+"&page="+ page, success:function(info) {
changeModel(info);// 更新局部页面
vartotalpage = $("#totalpage").val();//当前页面号 varcurtpage = $("#curtpage").val();// 总页面号 if(curtpage && totalpage) { cpage = curtpage; tpage = totalpage; }
display(cpage, tpage);//显示评论
},
error:function() { alert("加载失败!请稍后重试!"); }
}); }
/* obj: ajax 返回的html 数据 */ // 更新局部页面 functionchangeModel(obj) {
varcomt = $(".Comments"); comt.replaceWith(" "+ obj +" ");}
/* curreentpage: 当前页面号; tpage: 总的页面数 */ //显示新闻评论 functiondisplay(curtpage, tpage) { varoptions = { 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": returnpage; } }, } $("#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
varcurrentTarget = $(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了。运行截图如下:
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31