怎么使用bootstrap-paginator分页插件

2024-10-26 技术教程

这篇文章将为大家详细讲解有关怎么使用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：该控件的操作按钮的类型。（first、prev、page、next、last）

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事件。

参数：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")

getPages无object

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-clicked和page-changed。而且这两个事件作为参数使用分别对应的是 onPageClicked和onPageChanged，如上所示。

四、Demo

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

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Title</title><linkrel="stylesheet"href="./lib/bootstrap.css"></head><body><tableclass="tabletable-bordertable-hover"><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody></tbody></table><divclass="page"><ulclass="pagination"></ul></div><scripttype="text/template"id="tableTemp"><%for(leti=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><scriptsrc="./lib/jquery-2.1.1.min.js"></script><scriptsrc="./lib/bootstrap.js"></script><scriptsrc="./lib/bootstrap-paginator.js"></script><scriptsrc="./lib/template-native.js"></script><script>letcurrentPage=1;letpageSize=3;functionrender(){$.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()/****@parampageCurrent当前所在页*@parampageSum总页数*@paramcallback调用ajax*/functionsetPage(pageCurrent,pageSum,callback){$(".pagination").bootstrapPaginator({//设置版本号bootstrapMajorVersion:3,//显示第几页currentPage:pageCurrent,//总页数totalPages:pageSum,//当单击操作按钮的时候,执行该函数,调用ajax渲染页面onPageClicked:function(event,originalEvent,type,page){//把当前点击的页码赋值给currentPage,调用ajax,渲染页面currentPage=pagecallback&&callback()}})}</script>

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