Bootstrap Paginator分页插件+ajax

Bootstrap Paginator分页插件下载地址：

DownloadVisit Project in GitHub

Bootstrap分页插件属性介绍：

http://www.cnblogs.com/hqlong/p/6667766.html

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

[javascript] view plaincopy

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 //总页数
onPageChanged:function (event, originalEvent, typePage, currentPage) {
//事件：typePage是被点击的页码
}
}
element.bootstrapPaginator(options);
}
});
}

页面：

[html] view plaincopy

<ul class="pagination" id="pageUl">
</ul>

*li里面自动生成的

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

[javascript] view plaincopy

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;
}
},

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

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

转载于:https://www.cnblogs.com/hqlong/p/6667794.html

Bootstrap Paginator分页插件+ajax相关推荐

bootstrap分页插件php,bootstrap paginator分页插件使用方法
Bootstrap Paginator是一款基于Bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家. 分页有 ...
Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
Bootstrap Paginator 分页插件的使用
2019独角兽企业重金招聘Python工程师标准>>> 由于在给学生上课过程用需要用到分页操作,发现一个比较好用的分页插件,效果如下插件下载地址 :https://github. ...
java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
分页插件 ajax请求,jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
html 分页插件ajax,简易ajax生成分页插件
插件描述:jquery分页插件,可定义ajax获取数据的路由使用方法 1.插件依赖jquery,使用前需要先引入jquery库 2.可定制生成分页的样式及ajax获取数据后处理dom元素的方法,例如 ...
springboot整合bootstrap pagehelper分页插件 mybaties 做多表头表格查询列表
1,页面效果页面html 首先引入js bootstrap bootstrap-table <div style="width:1000px;"> ...
paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...
分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...

Bootstrap Paginator分页插件+ajax

Bootstrap Paginator分页插件+ajax相关推荐

最新文章

热门文章