bootstrap-paginator分页插件使用方法

萧安怡
2023-12-01

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

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

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

参数介绍:

标记为红色的为必选参数

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

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

参数:type,page,current。

type:该控件的操作按钮的类型。(firstprevpagenextlast

page:该按钮为第几页。

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

currentPagenumber1

设置当前页。

numberOfPagesnumber5

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

totalPagesnumber1

设置总页数。

pageUrlfunction

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

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

shouldShowPageboolean/functiontrue

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

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

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

itemTextsfunction

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

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

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

tooltipTitlesfunction

设置操作按钮的title属性。

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

useBootstrapTooltipbooleanfalse

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

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

bootstrapTooltipOptionsobject

Default:{

  animation: true,

  html: true,

  placement: 'top',

  selector: false,

  title: "",

  container: false

}

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

onPageClickedfunction

为操作按钮绑定click事件。

参数:eventoriginalEventtype,page。

onPageChangedfunction

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

参数:eventoldPagenewPage。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

公共命令:

如:

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

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

命令名参数返回值描述
showpage

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") 

getPagesobject

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

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

setOptionsobject

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

事件:

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

事件名回调函数描述
page-clickedfunction(event,originalEvent,type,page){}参数event, originalEvent是俩个jquery事件对象,可参考jquery相关文档
page-changeedfunction(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>

 

 类似资料: