Document

21:36:40

简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件。

githup项目地址:https://github.com/lyonlai/bootstrap-paginator

兼容: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+

参数介绍:

标记为红色的为必选参数

参数名称 数据类型 默认值 描述
bootstrapMajorVersion number 2 搭配使用的bootstrap版本,如果bootstrap的版本是2.X的分页必须使用div元素。3.X分页的必须使用ul>li元素。注意与bootstrap版本对应上。
size string "normal" 设置控件的显示大小,允许的值:mini,small,normal,large。
alignment string "left" 设置控件的对齐方式,允许的值:left,center,right。
itemContainerClass function

该参数接收一个函数,返回一个字符串,该字符串是我们定义的一个class类样式。当控件内的每个操作按钮被渲染(render)时,都会调用该函数,同时把有关该按钮的信息作为参数传入。

参数:type,page,current。

type:该控件的操作按钮的类型。(first、prev、page、next、last)

page:该按钮为第几页。

current:整个控件的当前页是第几页。

currentPage number 1

设置当前页。

numberOfPages number 5

设置控件显示的页码数。即:类型为“page”的操作按钮数量。

totalPages number 1

设置总页数。

pageUrl function

实际上,控件内的每个操作按钮都会被渲染成超链接,这样就可以为每个操作按钮动态设置链接地址。该参数是个函数,接受的参数为:type,page,current。

如:"http://baidu.com/list/page/"+page

shouldShowPage boolean/function true

该参数用于设置某个操作按钮是否显示,可是个布尔值也可是个函数。当为true时,显示。当为false时,不显示。如果该参数是个函数,需要返回个布尔值,通过这个返回值判断是否显示。

函数有3个参数: type, page, current。

使用函数的好处是,可以对每个操作按钮进行显示控制。

itemTexts function

控制每个操作按钮的显示文字。

为函数传递3个参数: type, page, current。

通过这个参数我们就可以将操作按钮上的英文改为中文。如first-->首页,last-->尾页。

tooltipTitles function

设置操作按钮的title属性。

传递3个参数: type, page, current。

useBootstrapTooltip boolean false

设置是否使用Bootstrap内置的tooltip。 true是使用,false是不使用,默认是不使用。

注意:如果使用,则需要引入bootstrap-tooltip.js插件。

bootstrapTooltipOptions object

Default:{

  animation: true,

  html: true,

  placement: 'top',

  selector: false,

  title: "",

  container: false

}

该参数为js对象,当参数useBootstrapTooltip(楼上那个)为true时,会将该对象传给bootstrap-tooltip插件。

onPageClicked function

为操作按钮绑定click事件。

参数:eventoriginalEventtype,page。

onPageChanged function

为操作按钮绑定页码改变事件。

参数:eventoldPagenewPage。

公共命令:

如:

$('#example').bootstrapPaginator("show",3) 调用show命令

$('#example').bootstrapPaginator("getPages") 调用getPages命令

命令名 参数 返回值 描述
show page

show命令用于直接跳转到特定的page,与直接点击操作按钮的效果是一样的。

使用方法:$('#example').bootstrapPaginator("show",3) 直接跳转到第3页,

$('#example').bootstrapPaginator("show",100)直接跳转到100页。

showFirst

showFirst 命令用于直接跳转到首页,与点击first按钮相同。

使用方法:$('#example').bootstrapPaginator("showFirst")

showLast

showFirst 命令用于直接跳转到最后一页,与点击last按钮相同。

使用方法:$('#example').bootstrapPaginator("showLast")

showPrevious

showPrevious 命令用于直接跳转到上一页。

使用方法:$('#example').bootstrapPaginator("showPrevious")

showNext

showNext命令用于直接跳转到下一页。

使用方法:$('#example').bootstrapPaginator("showNext")

getPages object

getPages命令用于返回当前控件中显示的页码,以数组形式返回。

使用方法:var arra = $('#example').bootstrapPaginator("getPages")

setOptions object

setOptions 命令用于重新设置参数。

使用方法:$('#example').bootstrapPaginator("setOptions",newoptions)

事件:

Bootstrap Paginator 提供了俩个事件:page-clicked和page-changed。这俩个事件作为参数使用,分别对应onPageClicked和onPageChanged。

事件名 回调函数 描述
page-clicked function(event,originalEvent,type,page){} 参数event, originalEvent是俩个jquery事件对象,可参考jquery相关文档
page-changeed function(event, oldPage, newPage) 同上文

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<table class="table table-border table-hover">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="page">
<ul class="pagination"></ul>
</div>
<script type="text/template" id="tableTemp">
<%for(let i = 0; i < item.length; i++){%>
<tr>
<td><%=(item[i].page * item[i].pageSize )+ i + 1%></td>
<td><%=item[i].name%></td>
<td><%=item[i].gender%></td>
<td><%=item[i].age%></td>
</tr>
<%}%>
</script>
</body>
</html>
<!--使用bootstrap插件必须使用引入jquery,因为bootstrap是基于jquery开发的-->
<script src="./lib/jquery-2.1.1.min.js"></script>
<!--bootstrap插件-->
<script src="./lib/bootstrap.js"></script>
<!--分页插件-->
<script src="./lib/bootstrap-paginator.js"></script>
<!--模板插件-->
<script src="./lib/template-native.js"></script>
<script>
let currentPage = 1;
let pageSize = 3;
function render() {
$.ajax({
url: "./setPage.php",
data: {
page: currentPage,
pageSize: pageSize
},
dataType: "json",
success: function (result) {
// 将数据渲染到页面
$("tbody").html(template("tableTemp",{item:result}))
// 调用分页函数.参数:当前所在页, 总页数(用总条数 除以 每页显示多少条,在向上取整), ajax函数
setPage(currentPage, Math.ceil(result[0].size/pageSize), render)
}
})
}
render() /**
*
* @param pageCurrent 当前所在页
* @param pageSum 总页数
* @param callback 调用ajax
*/
function setPage(pageCurrent, pageSum, callback) {
$(".pagination").bootstrapPaginator({
//设置版本号
bootstrapMajorVersion: 3,
// 显示第几页
currentPage: pageCurrent,
// 总页数
totalPages: pageSum,
//当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
onPageClicked: function (event,originalEvent,type,page) {
// 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
currentPage = page
callback && callback()
}
})
}
</script>

bootstrap-paginator分页插件的简单使用实例的更多相关文章

  1. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  2. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  3. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  4. Bootstrap Paginator分页插件(mark)

    Bootstrap Paginator分页插件

  5. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  6. Bootstrap Paginator分页插件的使用

    今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...

  7. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  8. JSP分页之结合Bootstrap分页插件进行简单分页

    结合Bootstrap的分页插件实现分页,其中策略是每次显示5个按钮,然后根据当前页的不同来进行不同的显示: 1. 当前页<3,如果当前页大于5页就显示前五页,不然就显示1~totalPage. ...

  9. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

随机推荐

  1. ES6入门——数值的扩展

    1.二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b或0B和0o或0O表示. 2.Number.isFinite(),Number.isNaN() ES6在Number对 ...

  2. 初学scrum及首次团队开发

    一.初学scrum 1.什么是scrum Scrum在英语的意思是橄榄球里的争球.而在这里Scrum是一种迭代式增量软件开发过程,经常性的被用于敏捷软件开发.Scrum包括了一系列实践和预定义角色的过 ...

  3. $.each遍历JSON字符串和 Uncaught TypeError: Cannot use 'in' operator to search for '156错误

    现在页面和后端交互都流行使用json了  自己记录一下解析字符串的方法,要不老是忘记!!!! success: function (data) { //data是后台传过来的字符串 $.each(JS ...

  4. Redis的系统级命令

    文章建立一个统一的认识就是Redis的版本是3.2.8 1:BGREWRITEAOF(bgrewriteaof) 执行一个 AOF文件 重写操作.重写会创建一个当前 AOF 文件的体积优化版本. 即使 ...

  5. Linux入门-2 VIM基础

    启动与退出 模式 进入插入模式 命令 删除.复制.粘贴 光标控制 查找与替换 EX模式 启动与退出 vim只启动vim vim <filename>打开文件,如果不存在则新建 模式 Nor ...

  6. Markdown学习使用

    本文记录Markdown的基础应用. 一.基础知识 Markdown 是一种标记语言 文件后缀名:.md 编辑工具:VSCode(visual studio code) VSCode中预览模式快捷键: ...

  7. ThinkPHP最新版本SQL注入漏洞

    如下controller即可触发SQL注入: code 区域 public function test() { $uname = I('get.uname'); $u = M('user')-> ...

  8. Ios国际化翻译工具

    IOS Translation Tool(IOS国际化翻译工具) 介绍 当IOS项目国际化的时候,手工去翻译每一个字符串是一件非常痛苦的事情.尤其是当项目中存在N多种语言.而且又很难保证,手工翻译的准 ...

  9. vim使用常看

    原网址http://www.runoob.com/linux/linux-vim.html 补充参考https://blog.csdn.net/w178191520/article/details/8 ...

  10. commons.pool2 对象池的使用

    commons.pool2 对象池的使用 ? 1 2 3 4 5 <dependency>     <groupId>org.apache.commons</groupI ...