Document

21:36:40

简述：bootstrap-paginator是一款基于bootstrap的jQuery分页插件。

githup项目地址：https://github.com/lyonlai/bootstrap-paginator

兼容： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+

参数介绍：

标记为红色的为必选参数

参数名称 数据类型 默认值 描述
bootstrapMajorVersion number 2 搭配使用的bootstrap版本，如果bootstrap的版本是2.X的分页必须使用div元素。3.X分页的必须使用ul>li元素。注意与bootstrap版本对应上。
size string "normal" 设置控件的显示大小，允许的值：mini，small，normal，large。
alignment string "left" 设置控件的对齐方式，允许的值：left，center，right。
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://baidu.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-tooltip插件。
onPageClicked function 无

为操作按钮绑定click事件。

参数：event, originalEvent, type,page。
onPageChanged function 无

为操作按钮绑定页码改变事件。

参数：event, oldPage, newPage。

公共命令：

如：

$('#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")
showLast 无 无

showFirst 命令用于直接跳转到最后一页，与点击last按钮相同。

使用方法：$('#example').bootstrapPaginator("showLast")
showPrevious 无 无

showPrevious 命令用于直接跳转到上一页。

使用方法：$('#example').bootstrapPaginator("showPrevious")
showNext 无 无

showNext命令用于直接跳转到下一页。

使用方法：$('#example').bootstrapPaginator("showNext")
getPages 无 object

getPages命令用于返回当前控件中显示的页码，以数组形式返回。

使用方法：var arra = $('#example').bootstrapPaginator("getPages")
setOptions object 无

setOptions 命令用于重新设置参数。

使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)

事件：

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

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

Demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Title</title>

    <link rel="stylesheet" href="./lib/bootstrap.css">

</head>

<body>

    <table class="table table-border table-hover">

        <thead>

            <tr>

                <th>序号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

    <div class="page">

        <ul class="pagination"></ul>

    </div>

    <script type="text/template" id="tableTemp">

        <%for(let i = 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>

<!--使用bootstrap插件必须使用引入jquery,因为bootstrap是基于jquery开发的-->

<script src="./lib/jquery-2.1.1.min.js"></script>

<!--bootstrap插件-->

<script src="./lib/bootstrap.js"></script>

<!--分页插件-->

<script src="./lib/bootstrap-paginator.js"></script>

<!--模板插件-->

<script src="./lib/template-native.js"></script>

<script>

    let currentPage = 1;

    let pageSize = 3;

    function render() {

        $.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()

    /**

     *

     * @param pageCurrent 当前所在页

     * @param pageSum 总页数

     * @param callback 调用ajax

     */

    function setPage(pageCurrent, pageSum, callback) {

        $(".pagination").bootstrapPaginator({

            //设置版本号

            bootstrapMajorVersion: 3,

            // 显示第几页

            currentPage: pageCurrent,

            // 总页数

            totalPages: pageSum,

            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面

            onPageClicked: function (event,originalEvent,type,page) {

                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面

                currentPage = page

                callback && callback()

            }

        })

    }

</script>

bootstrap-paginator分页插件的简单使用实例的更多相关文章

  1. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  2. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  3. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  4. Bootstrap Paginator分页插件(mark)

    Bootstrap Paginator分页插件

  5. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  6. Bootstrap Paginator分页插件的使用

    今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...

  7. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  8. JSP分页之结合Bootstrap分页插件进行简单分页

    结合Bootstrap的分页插件实现分页,其中策略是每次显示5个按钮,然后根据当前页的不同来进行不同的显示: 1. 当前页<3,如果当前页大于5页就显示前五页,不然就显示1~totalPage. ...

  9. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

随机推荐

  1. C++中精确到小数点后任意位

    #include <iostream> #include <iomanip> //用setprecision(n)设置精度,其中n表示精确到小数点后n位 using names ...

  2. 使用 Load Balancer,Corosync,Pacemaker 搭建 Linux 高可用集群

    由于网络架构的原因,在一般虚拟机或物理环境中常见的用 VIP 来实现双机高可用方案,无法照搬到 Azure 平台.但利用 Azure 平台提供的负载均衡或者内部负载均衡功能,可以达到类似的效果. 本文 ...

  3. 如何为运行的 ARM Linux 启用 LAD2.3 版本的诊断扩展

    Linux Azure Diagnostic (LAD) 扩展现在已经发布了 3.0 版本,但在 Azure 中国区,目前可用的最新版本还是 2.3. 虽然 Azure 门户提供了简单的操作版本为 L ...

  4. SQL Server ->> OFFSET & FETCH子句

    SQL Server 2012引入OFFSET + FETCH字句.它俩出现在SELECT .... ORDER BY ...后面.作用是告诉SQL Server在结果集中忽略前N行然后取前M行出来. ...

  5. js判断客户浏览器类型，版本

    在JS中判断浏览器的 类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌 却标准不一,因此时常需要根据不同 ...

  6. NODE-环境变量的配置（踩坑总结）

    初学Node.js,从官网下载了node.js的Windows Installer,安装完成后,通过控制台输入node命令,发现提示说“node"不是内部或外部命令,这通常是由于没有设置环境 ...

  7. EDM邮件群发：群发邮件不进垃圾箱的独家秘笈

    EDM邮件群发想要群发的邮件避免进入垃圾箱,不仅需要优化邮件内容和主题,管理收件人邮箱列表,还要有多服务器IP分流技术,控制发信速度,打乱收件人列表等手段,当然更少不了借助专业的邮件群发平台譬如U-M ...

  8. 利用kali嗅探周围发送的短信

    设备清单: 摩托罗拉 C118 (25块) FT232RL USB TO TTL (30元) 摩托罗拉 Motorola C118专用数据连接线 (10块) MiniUSB 链接线(10元,这个大家手 ...

  9. 理解Underscore中的节流函数

    上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...

  10. SQL Server的跨服务器数据访问方法

    想要在SQL服务器上访问另一个服务器的数据,可以采用此方式: 1.建立数据库链接: 右键“链接服务器”,选择“新建链接服务器...” 以上的操作也可以通过SQL脚本实现: exec sp_addlin ...