使用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系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
vue 文件目录结构详解
Nov 24 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python定时任务 sched模块用法实例
2019/11/04 Python
详解python中docx库的安装过程
2019/11/08 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
高校生生产实习自我鉴定
2013/09/21 职场文书
爱之链教学反思
2014/04/30 职场文书
技校毕业生自荐书
2014/05/23 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
永远是春天观后感
2015/06/12 职场文书
2015年中秋节主持词
2015/07/30 职场文书
爱护环境建议书
2015/09/14 职场文书