如何使用bootstrap-paginator分页插件？分页插件的简单使用实例！

2021-07-01 10:32:55 浏览数 (5610)

我们在通过简单的学习和了解之后，大概的对前端又来了不少的了解，那么对于开发中的我们比较常用的是框架的运用，那么今天我们就来说说有关于“如何使用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分页插件？”这个问题，相关的讲解就到这里结束啦，如果你觉得有更好的解释或者案例也可以和大家一同分享学习，更多有关于Bootstrap的相关内容都可以在W3Cschool中进行学习和了解。

w3cschool 编程狮，随时随地学编程

如何使用bootstrap-paginator分页插件？分页插件的简单使用实例 ！

如何使用bootstrap-paginator分页插件？分页插件的简单使用实例！