Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

 更新时间:2016年05月27日 12:06:28   作者:扶强  
这篇文章主要介绍了Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub

1.这是需要分页的页面放的 js函数:

<span style="font-size:14px;">function paging(page){ 
$.ajax({ 
type: "GET", 
url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", 
dataType:"json", 
success: function(msg){ 
....//省略(查询出来数据) 
} 
}); 
$.ajax({ 
type: "GET", 
url:"${ctx}/api/v1/user/count/1", 
dataType:"json", 
success:function(msg){ 
var pages = Math.ceil(msg.data/5);//这里data里面有数据总量 
var element = $('#pageUl');//对应下面ul的ID 
var options = { 
bootstrapMajorVersion:3, 
currentPage: page,//当前页面 
numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li) 
totalPages:pages //总页数 
} 
element.bootstrapPaginator(options); 
} 
}); 
}</span> 

页面:

<span style="font-size:14px;"><ul class="pagination" id="pageUl"> 
</ul></span> 

*li里面自动生成的

2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件,如下:

<span style="font-size:14px;">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"); 
paging(page); 
break; 
//上一页 
case "prev": 
currentTarget.bootstrapPaginator("showPrevious"); 
paging(page); 
break; 
case "next": 
currentTarget.bootstrapPaginator("showNext"); 
paging(page); 
break; 
case "last": 
currentTarget.bootstrapPaginator("showLast"); 
paging(page); 
break; 
case "page": 
currentTarget.bootstrapPaginator("show", page); 
paging(page); 
break; 
} 
},</span> 

*在你点击的页面样式出来后调用paging(page)方法,这里的page源文件里的参数已经有了,直接传!

效果:当样式改变后,直接拿控件的page值进行ajax请求的发送!最后实现无刷新分页。

以上所述是小编给大家介绍的Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • typescript基本数据类型HTMLElement与Element区别

    typescript基本数据类型HTMLElement与Element区别

    这篇文章主要为大家介绍了typescript基本数据类型HTMLElement与Element区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JavaScript+html5 canvas实现图片破碎重组动画特效

    JavaScript+html5 canvas实现图片破碎重组动画特效

    这篇文章主要介绍了JavaScript+html5 canvas实现破碎重组的视频特效,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • javascript dragable的Move对象

    javascript dragable的Move对象

    一个dragable的Move对象,大家可以运行下,测试看下效果。
    2009-08-08
  • JavaScript判断FileUpload控件上传文件类型

    JavaScript判断FileUpload控件上传文件类型

    在CS后台代码中获取FileUpload控件上传文件的类型是比较容易的!那么,能否在客户端通过JavaScript脚本判断FileUpload上传文件类型呢?答案是可以的,下面通过一个小例子为大家展示
    2015-09-09
  • 跟我学习javascript的call(),apply(),bind()与回调

    跟我学习javascript的call(),apply(),bind()与回调

    跟我学习javascript的call(),apply(),bind()与回调,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • ppk谈JavaScript style属性

    ppk谈JavaScript style属性

    JavaScript允许你改变站点的CSS表示层。如果想把用户的眼球吸引到那些你希望他们关注的页面元素上,改变样式是极佳的(也是很普遍的)方式。
    2008-10-10
  • 一文详解如何用原型链的方式实现JS继承

    一文详解如何用原型链的方式实现JS继承

    JavaScript中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] 。这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了原型链。本文将详细讲解如何用原型链的方式实现一个 JS 继承,感兴趣的可以了解下
    2022-04-04
  • 在JavaScript中实现命名空间

    在JavaScript中实现命名空间

    在JavaScript中实现命名空间...
    2006-11-11
  • JavaScript自定义Promise实现流程

    JavaScript自定义Promise实现流程

    现在网上有非常多的Promise文章,但都是给你一堆代码,或者某些核心代码,让你看完之后感觉,嗯,很厉害,但还是不知所云,不知其所以然。那么本文真正从一个小白开始带你深入浅出,一步一步实现自己的 Promise,这种自己造轮子的过程一定是进步最快的过程,快上车开始吧
    2022-10-10
  • 基于iScroll实现内容滚动效果

    基于iScroll实现内容滚动效果

    这篇文章主要为大家详细介绍了基于iScroll实现内容滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03

最新评论