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 实现动态翻页功能的更多相关文章

  1. pyspider示例代码五:实现自动翻页功能

    实现自动翻页功能 示例代码一 #!/usr/bin/env python # -*- encoding: utf- -*- # Created on -- :: # Project: v2ex fro ...

  2. [Qt] CFlip 翻页功能实现

    由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...

  3. jsp实现上一页下一页翻页功能

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...

  4. Web测试——翻页功能测试用例

    参考:https://wenku.baidu.com/view/e6462707de80d4d8d15a4f1e.html?rec_flag=default&mark_pay_doc=2&am ...

  5. Atitit 翻页功能的解决方案与版本历史 v4 r49

    Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本  项目版本记录.1 2. Easyui 的翻页组件2 ...

  6. Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx

    Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档   paip.js翻页分页pageing组件.txt1 ...

  7. PyQt—QTableWidget实现翻页功能

    主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...

  8. jsp实现翻页功能

    jsp实现翻页功能 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给 ...

  9. jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

随机推荐

  1. 实现mysql的读写分离(mysql-proxy)____1(mysql的主从复制,基于gtid的主从复制,半同步复制,组复制)

    主从复制原理: 从库生成两个线程,一个I/O线程,一个SQL线程: i/o线程去请求主库 的binlog,并将得到的binlog日志写到relay log(中继日志) 文件中:主库会生成一个 log ...

  2. Redis的内存回收策略和内存上限(阿里)

    还有一篇文章 讲解guava如何删除过期数据的,与redis不同,guava没有维护线程删除过期key,只是在设置 key 或者 读取key的时候,顺带删除参考:GuavaCache简介(一)是轻量级 ...

  3. 2018-2019-2 20175211 实验四《Android程序设计》实验报告

    目录 一.实验内容及步骤 1.Android Studio的安装测试 2.Activity测试 3.UI测试 4.布局测试 5.事件处理测试 二.问题及解决方法 三.代码托管 四.实验心得体会 一.实 ...

  4. Policy Gradient Algorithms

    Policy Gradient Algorithms 2019-10-02 17:37:47 This blog is from: https://lilianweng.github.io/lil-l ...

  5. JVM探究之 —— 类加载过程

    1. 类加载是什么 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连 ...

  6. Sonar错误 Invoke method(s) only conditionally

    sonarLint总是报错: Invoke method(s) only conditionally 代码如下: if(us != null){ logger.info("Log this: ...

  7. epool与select有什么区别

    select在一个进程中打开的最大fd是有限制的,由FD_SETSIZE设置,默认值是2048.不过 epoll则没有这个限制,它所支持的fd上限是最大可以打开文件的数目,这个数字一般远大于2048, ...

  8. CRM 负责人 选择

    CRM 负责人 参与 - 搜狗搜索https://www.sogou.com/sgo?query=CRM+%E8%B4%9F%E8%B4%A3%E4%BA%BA+%E5%8F%82%E4%B8%8E& ...

  9. coroutine闲谈

    coroutine居然能被吹到这种地步

  10. SNF快速开发平台2020版

    SNF快速开发平台分如下子平台: 1.CS快速开发平台 2.BS快速开发平台 3.H5移动端快速开发平台 4.软件开发机器人平台 配置型开发零编程 SNF快速开发平台是一个比较成熟的.net领域的商业 ...