使用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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
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实现文件编码批量转换
2014/03/10 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PDO::query讲解
2019/01/29 PHP
PHP实现的策略模式示例
2019/03/20 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
python PrettyTable模块的安装与简单应用
2019/01/11 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python getpass实现密文实例详解
2019/09/24 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
暑假家长评语大全
2014/04/17 职场文书
2014年安全员工作总结
2014/11/13 职场文书
作文评语怎么写
2014/12/25 职场文书
单位接收函格式
2015/01/30 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL