新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

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

Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub

1.那是内需分页的页面放的 js函数:

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

页面:

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

*li里面自动生成的

2.最重大也是最中央的是要和煦改下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"); 
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诉求的出殡和埋葬!最后完成无刷新分页。

图片 1

以上所述是作者给大家介绍的Bootstrap Paginator分页插件与ajax相结合贯彻动态无刷新分页效果的相关知识,希望对大家持有扶助,即使我们有其他疑问请给自个儿留言,小编会及时回复大家的。在此也特别感激大家对台本之家网址的援助!

您只怕感兴趣的篇章:

  • Vue form 表单提交 ajax异步须求 分页效果
  • 使用bootstrap-paginator.js 分页来开展ajax 异步分页央浼示例
  • ajax异步央浼详解
  • 浅谈js的ajax的异步和联合要求的标题
  • 听他们讲JQuery的$.ajax方法开展异步要求导致页面闪烁的消除办法
  • SpringMVC处境下达成的Ajax异步央浼JSON格式数据
  • DataTables BootStrap组合使用Ajax来获取数据何况动态加载dom的法子(排序,过滤,分页等)
  • 详解ajax jtemplate完毕动态分页
  • 至于Ajax异步央求后台数据开始展览动态分页功用

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:Bootstrap Paginator分页插件与ajax相结合实现动态无刷

您可能还会对下面的文章感兴趣: