Bootstrap Paginator 分页插件使用

来源:互联网 发布:有道词典网络已断开 编辑:程序博客网 时间:2024/05/04 18:06


Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。

代码: https://github.com/lyonlai/bootstrap-paginator 网站: http://lyonlai.github.io/bootstrap-paginator/ 效果图:

输入图片说明 使用方法: 1、首先要引入必要的css和js文件。

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

2、写一个div

<div id="example"></div>

3、编写js

$('#pageLimit').bootstrapPaginator({        currentPage: 1,        totalPages: 10,        numberOfPages:5,        itemTexts: function (type, page, current) {                switch (type) {                        case "first": return "首页";                        case "prev": return "上一页";                        case "next": return "下一页";                        case "last": return "末页";                       case "page": return page;        }    }});

4、大功告成 可惜成这样了~~

输入图片说明

5、这是为什么?

输入图片说明

原来bootstrap3,必须要求是ul元素。 6、一个字,改~

<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
$('#pageLimit').bootstrapPaginator({        currentPage: 1,        totalPages: 10,        size:"normal",        bootstrapMajorVersion: 3,        alignment:"right",        numberOfPages:5,        itemTexts: function (type, page, current) {                switch (type) {                    case "first": return "首页";                    case "prev": return "上一页";                    case "next": return "下一页";                    case "last": return "末页";                    case "page": return page;        }    }});

7、接下来就有了

输入图片说明

0 1
原创粉丝点击