这篇文章将为大家详细讲解有关怎么使用bootstrap-paginator分页插件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
首先我们需要了解什么是Bootstrap框架，对于这个我们之前有过讲解，不了解的小伙伴可以在Bootstrap 教程中进行学习和了解。
一、参数介绍
| 参数名称 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
| 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事件。 参数：event, originalEvent, type,page。 |
| onPageChanged | function | 无 | 为操作按钮绑定页码改变事件。 参数：event, oldPage, newPage。 |
在这个参数中红色标记的是我们需要必选的一个参数
二、公共命令
| 命令名 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| 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) |
参照上面的命令中我们来看看下面的例子，如下所示：
$('#example').bootstrapPaginator("show",3) 在这个命令中我们可以知道这边调用的是show命令；$('#example').bootstrapPaginator("getPages") 调用的是getPages命令
三、事件
| 事件名 | 回调函数 | 描述 |
|---|---|---|
| page-clicked | function(event，originalEvent，type，page){} | 参数event, originalEvent是俩个jquery事件对象，可参考jquery相关文档 |
| page-changeed | function(event, oldPage, newPage) | 同上文 |
对于Bootstrap Paginator 事件来说这边为我们提供了两个事件分别是：page-clicked和page-changed。而且这两个事件作为参数使用分别对应的是 onPageClicked和onPageChanged，如上所示。
四、Demo
下面我们来看看有关的一个页面代码吧，如下所示：
<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分页插件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
