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对象属性个数的示例代码
Nov 21 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
javascript实现前端分页效果
Jun 24 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
基于JS实现快速读取TXT文件
Aug 25 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Anaconda入门使用总结
2018/04/05 Python
python爬取指定微信公众号文章
2018/12/20 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python os库常用操作代码汇总
2020/11/03 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
机电一体化职业规划书
2014/01/07 职场文书
求职信标题怎么写
2014/05/26 职场文书
机电专业求职信
2014/06/14 职场文书
班级体育活动总结
2014/07/05 职场文书
学校党员对照检查材料
2014/08/28 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
父亲节寄语大全
2015/02/27 职场文书
小学家长意见怎么写
2015/06/03 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
详解Python魔法方法之描述符类
2021/05/26 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python