bootstrapPaginator分页插件

最新推荐文章于 2024-04-18 12:19:07 发布

我们的故事只有我们不知道

最新推荐文章于 2024-04-18 12:19:07 发布

阅读量2.5k

点赞数 2

分类专栏：项目所学文章标签：分页

本文链接：https://blog.csdn.net/qq_41484766/article/details/83443323

版权

项目所学专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Bootstrap Paginator插件简介

Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。

2.Bootstrap Paginator的使用

（1）下载bootstrap-paginator.js

下载地址：https://download.csdn.net/download/qq_41484766/10747302

（2）在HTML导入相关文件，如图所示

注意：导入的头文件的顺序不能颠倒

（3）代码部分

html：

<body>
 
	
	
      <ul class="pagination" id="pageLimit">
	
      </ul>



</body>

js：

<script>
	window.onload=function(){
	 $('#pageLimit').bootstrapPaginator({//将id为pageLimit的ul元素设置为分页插件
        currentPage: 1,//设置当前页码
        size: "small",//设置控件的显示大小，
        bootstrapMajorVersion: 3,//当前版本
        alignment: "right",//设置控件的对齐方式
        totalPages: 5,//设置总页数.
        itemTexts: function (type, page, current) {//控制每个操作按钮的显示文字。是个函数，有3个参数: type, page, current。
        	                                       //通过这个参数我们就可以将操作按钮上的英文改为中文，如first-->首页，last-->尾页。
            switch (type) {
                case "first": return "首页";
                case "prev": return "<";
                case "next": return ">";
                case "last": return "末页";
                case "page": return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) {//为操作按钮绑定click事件。
        	                                                   //回调函数的参数：event, originalEvent, type,page。
            
        } 
    });
	}
</script>

（4）效果图

3.Bootstrap Paginator参数详解

参数	数据类型	默认值	描述
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		为操作按钮绑定页码改变事件，回调函数

我们的故事只有我们不知道

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrapPaginator分页插件

1.Bootstrap Paginator插件简介 Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。 2.Bootstrap Paginator的使用（1）下载bootstrap-paginator.js 下载地址：https://download.cs...
复制链接

扫一扫