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


Posted in Javascript onMarch 09, 2017

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
You might like
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php实现zip文件解压操作
2015/11/03 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Vue基础配置讲解
2019/11/29 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python如何实现强制数据类型转换
2019/11/22 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Python中如何定义一个函数
2016/09/06 面试题
企业治理工作自我评价
2013/09/26 职场文书
化学相关工作求职信
2013/10/02 职场文书
值班管理制度范本
2015/08/06 职场文书
售房协议书范本
2015/08/11 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技