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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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中redis的用法深入解析
2014/02/20 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
ES6中Set和Map用法实例详解
2020/03/02 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python实现图片批量压缩程序
2018/07/23 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Django操作session 的方法
2020/03/09 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
编辑个人求职信范文
2013/09/21 职场文书
教育专业自荐书范文
2013/12/17 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
雷锋电影观后感
2015/06/10 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技