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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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
星际争霸任务指南——神族
2020/03/04 星际争霸
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
浅析Python 条件控制语句
2020/07/15 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
学习Python需要哪些工具
2020/09/04 Python
python re模块常见用法例举
2021/03/01 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
高三地理教学反思
2014/01/11 职场文书
承认错误的检讨书
2014/01/30 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
初中同学聚会感言
2014/02/11 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
黑白记忆观后感
2015/06/18 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers