Bootstrap-分页插件Paginator

Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，我的以为这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时得到插件状态的改变，以及事件来监听用户的动做。目前通过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

官网地址：http://bootstrappaginator.org/

DownloadVisit Project in GitHub

它的使用和其余Bootstrap内置的插件同样，须要引入以下文件：

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

注意：jquery要使用1.8版本以上的。

入门实例

效果：

<div id="example"></div>
    <script type='text/javascript'>
        var options = {
            currentPage: 4,
            totalPages: 10,
        numberOfPages:5
        }

        $('#example').bootstrapPaginator(options);
    </script><span style="font-family:'sans serif, tahoma, verdana, helvetica';"><span style="white-space:normal;"> </span></span>

只须要简单的一句便可：$('#example').bootstrapPaginator(options)将id为'example'的dom元素设置为分页组件，同时传入一些定制参数。currentPage设置当前页码，totalPages设置共多少页，numberOfPages设置显示的页码数。

组件结构

组件结构如上图包括5中类型的操做按钮，如：首页(first)、尾页(last)、上一页(prev)、下一页(next) 、以及页(page)。固然这是默然的结构，咱们可经过参数对结构及样式进行定制。

参数

参数名	数据类型	默认值	描述
size	string	"normal"	设置控件的显示大小，是个字符串. 容许的值: mini, small, normal,large。值：mini版的、小号的、正常的、大号的。
alignment	string	"left"	设置控件的对齐方式，是个字符串， 容许的值用： left, center andright. 即：左对齐、居中对齐、右对齐。
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://example.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的bootstrap-tooltip.js插件。
onPageClicked	function		为操做按钮绑定click事件。回调函数的参数：event, originalEvent, type,page。
onPageChanged	function		为操做按钮绑定页码改变事件，回调函数的参数：event,

公共命令
另外该插件还提供了几个公共的命令，能够经过以下方法调用，如：$('#example').bootstrapPaginator("show",3) 调用show命令、$('#example').bootstrapPaginator("getPages") 调用getPages命令

命令名	参数	返回值	描述
show	page		show命令用于直接跳转到特定的page，与直接点击操做按钮的效果是同样的。使用方法，如：$('#example').bootstrapPaginator("show",3) 直接跳转到第3页，$('#example').bootstrapPaginator("show",100)直接跳转到100页。
showFirst			showFirst 命令用于直接跳转到首页，与点击first按钮相同。使用方法：$('#example').bootstrapPaginator("showFirst")
showPrevious			showPrevious 命令用于直接跳转到上一页。使用方法：$('#example').bootstrapPaginator("showPrevious")
showNext			showNext命令用于直接跳转到下一页。
showLast			showLast 命令用于直接跳转到上一页。
getPages		object	getPages命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra = $('#example').bootstrapPaginator("getPages")
setOptions	object		setOptions 命令用于从新设置参数，使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)

 

 

 

 

 

 

事件Events
Bootstrap Paginator 提供了俩个事件：page-clicked和page-changed。这俩个事件做为参数使用，分别对应onPageClicked和onPageChanged。

事件名	回调函数	描述
page-clicked	function(event, originalEvent, type, page)	同上文。另外，参数event, originalEvent是俩个jquery事件对象，可参考jquery相关文档
page-changed	function(event, oldPage, newPage)	同上文

 

 

 

另外，demo就不写了，建议你们上官网，官网对于每一个参数、命令、事件 都提供了实例，在经过参考上面的文档就比较好理解了。

var options = {
            currentPage: 3,
            totalPages: 10,
            pageUrl: function(type, page, current){                
                  return "http://example.com/list/page/"+page;
            }
        }

        $('#example').bootstrapPaginator(options);

在pageUrl方法下面就能够写action方法了，其中current参数就是当前点击页码