Bootstrap分页插件--Bootstrap Paginator

开源中国有一篇介绍的很详细，链接：https://my.oschina.net/shunshun/blog/204587

1.引入

<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

2.html代码 引用bootstrap的分页组件  删除里面的 li

<nav aria-label="Page navigation">
　　<ul class="pagination">
　　　　<!--组件要生成的部分-->
　　</ul>
</nav>

 3.js代码

window.page = 1;
$('.pagination').bootstrapPaginator({
    bootstrapMajorVersion:3,//使用3版本的bootstrap  因为3版本的分页使用ul包裹的   2版本是div   所以要区别开
    size:'small',//按钮的大小
    numberOfPages:10,//显示按钮的个数
    currentPage:5,//设置当前页.  默认为1;
    totalPages: 59,//总页数  
    onPageClicked:function (event, originalEvent, type,page) {
        /*event jquery事件对象*/
        /*originalEvent dom事件对象*/
        /*type 按钮的类型 */
        /*page 当前按钮的页码*/
        window.page = page; //当点击时把页码记在window.page上  为了后期发ajax 使用           
    }
});

 4.option(常用配置)

　　

参数名	数据类型	默认值	描述
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, oldPage, newPage。