Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址:
DownloadVisit Project in GitHub
http://www.cnblogs.com/hqlong/p/6667766.html
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);//这里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);
- }
- });
- }</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) {
- //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;
- }
- },</span>
*在你点击的页面样式出来后调用paging(page)方法,这里的page源文件里的参数已经有了,直接传!
效果:当样式改变后,直接拿控件的page值进行ajax请求的发送!最后实现无刷新分页。
Bootstrap Paginator分页插件+ajax的更多相关文章
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件(mark)
Bootstrap Paginator分页插件
- Bootstrap Paginator分页插件使用示例
最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap Paginator分页插件的使用
今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- Bootstrap分页插件ajax返回数据,工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
- jq.paginator分页插件稍加修改
样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...
随机推荐
- 【BIEE】12_查看BIEE的物理SQL
有时候,我们在使用BIEE的时候回出现一些问题,需要借助物理SQL来进行问题分析.通过物理SQL我们就可以看到BIEE在数据库中是如何去检索出数据库. 查看物理SQL的方式 [登录BIEE]--[管理 ...
- Excle数组用法
现在有如下需求:需要将行与列进行乘积,并将结果录入到对应单元格 [需求展示] 面对上面这样的表格,你会怎么处理呢?一个个乘积后录入吗?还是使用公式一行行操作? [解决办法] 这种问题,使用数组是最好解 ...
- wireshark过滤语法总结 (转载)
做应用识别这一块经常要对应用产生的数据流量进行分析. 抓包采用wireshark,提取特征时,要对session进行过滤,找到关键的stream,这里总结了wireshark过滤的基本语法,供自己以后 ...
- php中的可变变量、可变函数、匿名函数
1.可变变量 简而言之:获取一个普通变量的值作为这个可变变量的变量名. 如: $a = "hello"; $$a = " world"; /* $a 的值为&q ...
- win10下iis绑定局域网ip无效的解决方案
win7不会出现此问题 win10会 win8未测试 问题描述 <binding protocol="http" bindingInformation="*:808 ...
- excel单元格内插入选择项pass、fail、not support等
1.点击菜单栏的数据—-->>数据验证 2.选择 序列 在 来源 选项中填入Pass,Fail,On Going,Not Support 3.在选中的单元格并在菜单栏选中 新建规则
- NIO之缓冲区(Buffer)的数据存取
缓冲区(Buffer) 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与NIO通道进行交互,数据是从通道 ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...
- mongodb 实现关系型数据库中查询某一列 的效果
近期在tornado\mongodb\ansible mongodb中有个find()方法非常牛逼,能够将集合中全部的表都传出来,一開始我这么写 class Module_actionHandler( ...
- Python内置函数之input()
input([prompt])input()读取标准输入并打印字符串到屏幕. 参数是自定义的提示符. 例子: >>> input('$ ') $ pwd 'pwd'