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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
JavaScript使用prototype定义对象类型
Feb 07 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
Vue formData实现图片上传
Aug 20 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
vuex存取值和映射函数使用说明
Jul 24 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JS实现self的resend
2010/07/22 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
JQuery live函数
2010/12/24 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python实现简单遗传算法
2020/09/18 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
经典c++面试题五
2014/12/17 面试题
函授大学生自我鉴定
2014/02/05 职场文书
金融与证券专业求职信
2014/06/22 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
python基础之错误和异常处理
2021/10/24 Python