之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它。
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);??
- ????????????????????var?element?=?$('#pageUl');??
- ????????????????????var?options?=?{??
- ????????????????????????bootstrapMajorVersion:3,??
- ????????????????????????currentPage:?page,??
- ????????????????????????numberOfPages:?5,??
- ????????????????????????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)?{??
- ??
- ??????????????
- ??????????????
- ????????????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请求的发送!最后实现无刷新分页。
