Bootstrap Paginator分页插件下载地址:

DownloadVisit Project in GitHub

 Bootstrap分页插件属性介绍:

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

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

[javascript] view plain copy 
  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.                      onPageChanged:function (event, originalEvent, typePage, currentPage) {
                    //事件:typePage是被点击的页码
                }
  23. }
  24. element.bootstrapPaginator(options);
  25. }
  26. });
  27. }</span>

页面:

[html] view plain copy 
  1. <span style="font-size:14px;"><ul class="pagination" id="pageUl">
  2. </ul></span>

*li里面自动生成的

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

[javascript] view plain copy 
  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. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

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

  2. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  3. Bootstrap Paginator分页插件(mark)

    Bootstrap Paginator分页插件

  4. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  5. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  6. Bootstrap Paginator分页插件的使用

    今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...

  7. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  8. Bootstrap分页插件ajax返回数据,工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

  9. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

随机推荐

  1. 【BIEE】12_查看BIEE的物理SQL

    有时候,我们在使用BIEE的时候回出现一些问题,需要借助物理SQL来进行问题分析.通过物理SQL我们就可以看到BIEE在数据库中是如何去检索出数据库. 查看物理SQL的方式 [登录BIEE]--[管理 ...

  2. Excle数组用法

    现在有如下需求:需要将行与列进行乘积,并将结果录入到对应单元格 [需求展示] 面对上面这样的表格,你会怎么处理呢?一个个乘积后录入吗?还是使用公式一行行操作? [解决办法] 这种问题,使用数组是最好解 ...

  3. wireshark过滤语法总结 (转载)

    做应用识别这一块经常要对应用产生的数据流量进行分析. 抓包采用wireshark,提取特征时,要对session进行过滤,找到关键的stream,这里总结了wireshark过滤的基本语法,供自己以后 ...

  4. php中的可变变量、可变函数、匿名函数

    1.可变变量 简而言之:获取一个普通变量的值作为这个可变变量的变量名. 如: $a = "hello"; $$a = " world"; /* $a 的值为&q ...

  5. win10下iis绑定局域网ip无效的解决方案

    win7不会出现此问题 win10会 win8未测试 问题描述 <binding protocol="http" bindingInformation="*:808 ...

  6. excel单元格内插入选择项pass、fail、not support等

    1.点击菜单栏的数据—-->>数据验证 2.选择 序列 在 来源 选项中填入Pass,Fail,On Going,Not Support 3.在选中的单元格并在菜单栏选中 新建规则

  7. NIO之缓冲区(Buffer)的数据存取

    缓冲区(Buffer) 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与NIO通道进行交互,数据是从通道 ...

  8. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

  9. mongodb 实现关系型数据库中查询某一列 的效果

    近期在tornado\mongodb\ansible mongodb中有个find()方法非常牛逼,能够将集合中全部的表都传出来,一開始我这么写 class Module_actionHandler( ...

  10. Python内置函数之input()

    input([prompt])input()读取标准输入并打印字符串到屏幕. 参数是自定义的提示符. 例子: >>> input('$ ') $ pwd 'pwd'