之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它。

Bootstrap Paginator分页插件下载地址:

DownloadVisit
Project in GitHub

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

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

页面:

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

*li里面自动生成的

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

  1. <span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) {
  2. //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return
  3. var currentTarget = $(event.currentTarget);
  4. switch (type) {
  5. case "first":
  6. currentTarget.bootstrapPaginator("showFirst");
  7. paging(page);
  8. break;
  9. //上一页
  10. case "prev":
  11. currentTarget.bootstrapPaginator("showPrevious");
  12. paging(page);
  13. break;
  14. case "next":
  15. currentTarget.bootstrapPaginator("showNext");
  16. paging(page);
  17. break;
  18. case "last":
  19. currentTarget.bootstrapPaginator("showLast");
  20. paging(page);
  21. break;
  22. case "page":
  23. currentTarget.bootstrapPaginator("show", page);
  24. paging(page);
  25. break;
  26. }
  27. },</span>

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

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

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页的更多相关文章

  1. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  2. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  3. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

  4. jq分页插件,支持动态,静态分页的插件,简单易用。

    工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...

  5. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  6. Ajax+Asp.Net无刷新分页

    1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...

  7. ajax分页2:jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. ajax实现的无刷新分页代码实例

    一.html代码部分: <table class="table style-5">   <thead id="t_head">     ...

  9. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

随机推荐

  1. ubuntu设置字体编码GBK和UTF-8

    http://www.xwuxin.com/?p=1155 http://zhidao.baidu.com/link?url=T6m7WDVOM1VBiUctkfkf1qO14lSMLhxg6MIRt ...

  2. 树列复选框Extjs

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 关联规则算法之FP growth算法

    FP树构造 FP Growth算法利用了巧妙的数据结构,大大降低了Aproir挖掘算法的代价,他不需要不断得生成候选项目队列和不断得扫描整个数据库进行比对.为了达到这样的效果,它采用了一种简洁的数据结 ...

  4. PHP学习笔记-session

    session 在windows中的默认保存在AppDate/Local/Temp

  5. Xcode8 去除系统日志输出

    Edit Scheme-> Run -> Arguments, 在Environment Variables里边添加 OS_ACTIVITY_MODE = disable

  6. jquery.validate.js 一个jQuery验证格式控件

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  7. js 截取字符串里的ip

    var ip_reg = /([\d\.]*)/ig; ip = ip_reg.exec(str); return ip; ip_reg会截取 '(' 开始的字符串,中间包含数字和 '.' .

  8. 用OpenSSL生成自签名证书在IIS上搭建Https站点(用于iOS的https访问)

    前提: 先安装openssl,安装有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.这里推荐第一种. 安装包:http://slproweb.com/products/ ...

  9. 浅谈IOS8之size class

    文章目录 1. 简介 2. 实验 3. 实战 3.1. 修改 Constraints 3.2. 安装和卸载 Constraints 3.3. 安装和卸载 View 3.4. 其他 4. 后话 以前和安 ...

  10. Runtime —— 从应用场景说起

    根据平时遇到的情况,通过查资料和自己的理解,对Runtime黑科技进行一次个人的学习总结