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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JS实现电商放大镜效果
Aug 24 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
详解Vue之计算属性
Jun 20 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python静态方法实例
2015/01/14 Python
Python3.6简单反射操作示例
2018/06/14 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python变量类型知识点总结
2019/02/18 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
幼儿园毕业家长感言
2014/02/10 职场文书
总经理任命书
2014/03/29 职场文书
班主任新年寄语
2014/04/04 职场文书
租车协议书范本
2014/04/22 职场文书
幼儿老师求职信
2014/06/30 职场文书
科学发展观活动总结
2014/08/28 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
Linux中各个目录的作用与内容
2022/06/28 Servers
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript