千家信息网

怎么使用bootstrap-paginator分页插件

发表于:2025-11-06 作者:千家信息网编辑
千家信息网最后更新 2025年11月06日,这篇文章将为大家详细讲解有关怎么使用bootstrap-paginator分页插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先我们需要了解什么是Bootstr
千家信息网最后更新 2025年11月06日怎么使用bootstrap-paginator分页插件

这篇文章将为大家详细讲解有关怎么使用bootstrap-paginator分页插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

首先我们需要了解什么是Bootstrap框架,对于这个我们之前有过讲解,不了解的小伙伴可以在Bootstrap 教程中进行学习和了解。


一、参数介绍

参数名称数据类型默认值描述
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内置的tooltiptrue是使用,false是不使用,默认是不使用。

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

bootstrapTooltipOptionsobject

Default:{

  animation: true,

  html: true,

  placement: 'top',

  selector: false,

  title: "",

  container: false

}

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

onPageClickedfunction

为操作按钮绑定click事件。

参数:event, originalEvent, type,page。

onPageChangedfunction

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

参数:event, oldPage, newPage。

在这个参数中红色标记的是我们需要必选的一个参数


二、公共命令

命令名参数返回值描述
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)

参照上面的命令中我们来看看下面的例子,如下所示:

$('#example').bootstrapPaginator("show",3) 在这个命令中我们可以知道这边调用的是show命令;$('#example').bootstrapPaginator("getPages") 调用的是getPages命令


三、事件

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

对于Bootstrap Paginator 事件来说这边为我们提供了两个事件分别是:page-clickedpage-changed。而且这两个事件作为参数使用分别对应的是 onPageClickedonPageChanged,如上所示。


四、Demo

下面我们来看看有关的一个页面代码吧,如下所示:

                Title        
序号 姓名 性别 年龄

    关于"怎么使用bootstrap-paginator分页插件"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

    0