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. <每日 1 OJ> -LeetCode 13 . 罗马数字转正数

    题目: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1 ...

  2. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  3. Phoenix概述

    Phoenix是Salesforce.com开源的一个项目,可以让开发者在Apache HBase上执行SQL查询. Phoenix查询引擎会将SQL查询转换为一个或多个HBase scan,并编排执 ...

  4. js正则表达式提取汉字和去掉汉字

    //只提取汉字   function GetChinese(strValue) {       if(strValue!= null && strValue!= "" ...

  5. Python知乎上推荐的项目

    原文地址:https://www.zhihu.com/question/29372574/answer/88744491 作者:Wayne Shi链接:https://www.zhihu.com/qu ...

  6. layer.confirm 防止post重复提交

    layer.confirm("确定对该资源单的价格"+isa+value+"元吗!", function(index, layero){ $(layero).f ...

  7. yum安装python3.6的方法

    # centos7 # 换成阿里云的yum源 yum -y install epel-release yum repolist yum -y install python36 测试 [root@loc ...

  8. Mac下 VirtualBox(VBox) 的 Centos6/7 共享文件夹配置

    vbox 安装虚拟机请移步这里. https://blog.csdn.net/a47846800/article/details/88847466 前期准备: 远程登录 centos 系统, 分边执行 ...

  9. Kafka高级设计和架构,一文深化理解

    主题: 1.kafka是写磁盘还是写内存? 2.kafka究竟是由 consumer 从 broker 那里拉数据,还是由 broker 将数据推到 consumer? 3.如何区分已消费(consu ...

  10. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器功能简介---视频直播、直播鉴权(如何完美将EasyDSS过渡到新版)

    作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发是EasyDSS流媒体服务自身一大核心功能.写本篇博文的一个目的是向大家介绍EasyDSS新版的直播间.匿名直播.和虚拟直播的功能, 另 ...