Bootstrap分页插件之Bootstrap Paginator实例详解_javascript技巧

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>

使用实例:

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实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, paginator
分页插件
bootstrap paginator、bootstrap3 paginator、bootstrappaginator、bootstrappaginator 3、paginator 分页插件,以便于您获取更多的相关知识。

时间: 2024-11-29 00:14:14

Bootstrap分页插件之Bootstrap Paginator实例详解_javascript技巧的相关文章

Bootstrap carousel轮转图的使用实例详解_javascript技巧

图片轮播效果在Web中常常能看到,很多人也称之为幻灯片.其主要显示的效果就是多幅图片轮回播放,从右向左播放,鼠标悬停在图片时会暂停播放,如果鼠标悬停或单击右下角圆点时,会显示对应的图片. 这种图片轮播效果,在Bootstrap框架中是通过Carousel插件来实现 演示效果截图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel=&q

Bootstrap 折叠(Collapse)插件用法实例详解_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst

Bootstrap 附加导航(Affix)插件实例详解_javascript技巧

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以通过 data 属

Bootstrap表格和栅格分页实例详解_javascript技巧

拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu

BootStrap扔进Django里的方法详解_javascript技巧

因为django的版本差异化比较大,所以以下配置仅供学习参考. D:\www\mysite>python --version Python 2.7.5 >>> print django.__version__ 1.9.4 本记录不作细说,主要配置过程如下: 1.settings.py最后一段,关于静态文件的配置 # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto

JS插件overlib用法实例详解_javascript技巧

本文实例讲述了overlib用法.分享给大家供大家参考,具体如下: overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码. 它可以简单的通过设置一些参数或命令来改变弹出页面的款式.皮肤与形状,不但如此,它还提供了非常简单的扩展功能,来足客户的不同需求. overLIB 使用非常的简单. 一.在<head></head> 标签内添加: 复制代码 代码如下: <script type="text/javascript" src=&quo

Bootstrap Fileinput文件上传组件用法详解_javascript技巧

一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.bootstrap fileinput究极进化:允许同时多线程上传多个文件. 上传中 上传完成后 二.代码示例 怎么样?效果如何?不要急,我们一步一步来实现以上的效果. 1

JavaScript函数节流概念与用法实例详解_javascript技巧

本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text

js闭包用法实例详解_javascript技巧

本文实例讲述了js闭包用法.分享给大家供大家参考,具体如下: 引言 在公司中需要写一个js脚本来进行网站的统计,实现类似百度统计或者站长统计的功能,在实现的过程中自己感觉写的代码还是可以的,因为之前的js代码都是这些写,但是在组长代码走查的时候却非常的不满意,因为我们在js中写的方法都是全局的方法,因为我们写的东西需要嵌入到别人的界面中,所以这些全局的东西很可能会和别人的东西重名从而引发错误,所以说组长就给我留下一句话:用js闭包包起来. 变量作用域 我们都非常的熟悉变量的作用域就分为:全局变量