Bootstrap分页插件之Bootstrap Paginator实例详解


Posted in Javascript onOctober 15, 2016

Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

官网地址:http://bootstrappaginator.org/

DownloadVisit Project in GitHub

使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件:

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

Bootstrap分页插件之Bootstrap Paginator实例详解

Bootstrap分页插件之Bootstrap Paginator实例详解

Bootstrap分页插件之Bootstrap Paginator实例详解

Bootstrap分页插件之Bootstrap Paginator实例详解

Bootstrap分页插件之Bootstrap Paginator实例详解

使用实例:

jsp代码

<div class="padlr" align="right">
<ul id="data-pagination" class="pagination">

<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>

js代码

var pageNumber = 1;
var pageSiza = 10;
function getData() {
$.post("url", {
dataId : dataId,
currentPage: pageNumber,
pageSize : pageSize
}, function(data) {
if (data.totalRow > 0) {
var options = {
currentPage : data.pageNumber, //变量名必须为currentPage
totalPages : data.totalPage, //变量名必须为totalPages
ajaxOption: {
url: 'url',
pageSize: pageSize,
dataId : dataId,
appendElement: 'data-list',
templateId: 'tpl-data-list',
otherParams:{
}
},
}
$('#data-pagination').bootstrapPaginator(options);
var html = template("tpl-data-list", data);
$('#data-list').html(html);
} else {
$('#data-list').html("");
}
});
}

$('#data-pagination').bootstrapPaginator(options)就是将id为'data-pagination'的dom元素设置为分页组件,同时传入一些定制参数,currentPage设置当前页码,totalPages设置总页数。

以上所述是小编给大家介绍的Bootstrap分页插件之Bootstrap Paginator实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 #Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 #Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
jQuery如何防止Ajax重复提交
Oct 14 #Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 #Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
You might like
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php数组添加元素方法小结
2014/12/20 PHP
php二维码生成
2015/10/19 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Django 解决由save方法引发的错误
2020/05/21 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
Python文件操作的面试题
2013/06/22 面试题
教师岗位职责
2013/11/17 职场文书
合作协议书范文
2014/08/20 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers