bootstrap-paginator + ajax 实现动态翻页功能
1、下载http://plugins.jquery.com/bootstrap-paginator/
2、引用<script src="/static/bootstrap/js/bootstrap-paginator.min.js"></script>
3、首先定义一个html标签ul用以显示分页<ul style="margin: 0;" id="bp-3-Paginator-sm"></ul>
4、定义一个公共的js方法用来控制分页信息
//显示分页信息
function pageInfo(totalNum, page_size, currentPage){
//分页显示数据
var options = {
size : "small",//设置显示大小
bootstrapMajorVersion : 3,
currentPage : currentPage||1,//设置当前页,默认起始页为第一页
numberOfPages : 5,//每次展示多少页
totalPages : Math.ceil(totalNum/page_size),//总页数
alignment : "left",//显示位置
useBootstrapTooltip : false,//是否显示tip提示框
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first" : return "首页";
case "prev" : return "上一页";
case "next" : return "下一页";
case "last" : return "末页";
case "page" : return page;
}
},
onPageClicked: function(e,originalEvent,type,page){//点击页数时,触发该方法
var page_size = $("#page_size").val();
test(page_size, page);//调用ajax方法,如果这里还需要校验查询条件的话,可以写个单独的js方法,在此处调用该方法,在校验方法中去调用ajax方法
},
};
$('#bp-3-Paginator-sm').bootstrapPaginator(options);
}
5、页面加载的时候显示方式
$(function() {
pageInfo(totalNum, page_size, 1);//默认显示第一页
});
6、ajax方式显示
function test(page_size, page_index){
$.ajax({
url:"",//请求URL
type:'GET', //请求方法
data:{"param1" : value1},//请求参数
dataType:"json", //返回的数据格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
//请求之前要做的事情,此操作的结果不会影响下面方法的执行
},
success:function(data,textStatus,jqXHR){
//请求成功要做的事情
//关于总数据多少,每页显示多少数据,总工多少页,这些数据在这边更新
pageInfo(data.totalNum, page_size, page_index)
return false;
},
error:function(xhr,textStatus){
//请求异常做的事情
return false;
},
complete:function(){
//最后要做的事情
}});
}
这里有个问题,就是当总数据量为0时,js就会报错,不会往下执行,我们可以直接去bootstrap-paginator.min.js这个文件里面将“if(page>this.totalPages||1>page)throw"Page out of range";”这段全删掉,并控制一下当数据量为空的时候不显示分页插件
bootstrap-paginator + ajax 实现动态翻页功能的更多相关文章
- pyspider示例代码五:实现自动翻页功能
实现自动翻页功能 示例代码一 #!/usr/bin/env python # -*- encoding: utf- -*- # Created on -- :: # Project: v2ex fro ...
- [Qt] CFlip 翻页功能实现
由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...
- jsp实现上一页下一页翻页功能
前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...
- Web测试——翻页功能测试用例
参考:https://wenku.baidu.com/view/e6462707de80d4d8d15a4f1e.html?rec_flag=default&mark_pay_doc=2&am ...
- Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本 项目版本记录.1 2. Easyui 的翻页组件2 ...
- Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx
Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档 paip.js翻页分页pageing组件.txt1 ...
- PyQt—QTableWidget实现翻页功能
主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...
- jsp实现翻页功能
jsp实现翻页功能 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给 ...
- jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
随机推荐
- 实现mysql的读写分离(mysql-proxy)____1(mysql的主从复制,基于gtid的主从复制,半同步复制,组复制)
主从复制原理: 从库生成两个线程,一个I/O线程,一个SQL线程: i/o线程去请求主库 的binlog,并将得到的binlog日志写到relay log(中继日志) 文件中:主库会生成一个 log ...
- Redis的内存回收策略和内存上限(阿里)
还有一篇文章 讲解guava如何删除过期数据的,与redis不同,guava没有维护线程删除过期key,只是在设置 key 或者 读取key的时候,顺带删除参考:GuavaCache简介(一)是轻量级 ...
- 2018-2019-2 20175211 实验四《Android程序设计》实验报告
目录 一.实验内容及步骤 1.Android Studio的安装测试 2.Activity测试 3.UI测试 4.布局测试 5.事件处理测试 二.问题及解决方法 三.代码托管 四.实验心得体会 一.实 ...
- Policy Gradient Algorithms
Policy Gradient Algorithms 2019-10-02 17:37:47 This blog is from: https://lilianweng.github.io/lil-l ...
- JVM探究之 —— 类加载过程
1. 类加载是什么 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连 ...
- Sonar错误 Invoke method(s) only conditionally
sonarLint总是报错: Invoke method(s) only conditionally 代码如下: if(us != null){ logger.info("Log this: ...
- epool与select有什么区别
select在一个进程中打开的最大fd是有限制的,由FD_SETSIZE设置,默认值是2048.不过 epoll则没有这个限制,它所支持的fd上限是最大可以打开文件的数目,这个数字一般远大于2048, ...
- CRM 负责人 选择
CRM 负责人 参与 - 搜狗搜索https://www.sogou.com/sgo?query=CRM+%E8%B4%9F%E8%B4%A3%E4%BA%BA+%E5%8F%82%E4%B8%8E& ...
- coroutine闲谈
coroutine居然能被吹到这种地步
- SNF快速开发平台2020版
SNF快速开发平台分如下子平台: 1.CS快速开发平台 2.BS快速开发平台 3.H5移动端快速开发平台 4.软件开发机器人平台 配置型开发零编程 SNF快速开发平台是一个比较成熟的.net领域的商业 ...