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. 理解LSTM/RNN中的Attention机制

    转自:http://www.jeyzhang.com/understand-attention-in-rnn.html,感谢分享! 导读 目前采用编码器-解码器 (Encode-Decode) 结构的 ...

  2. Android中如何在Eclipse中关联源代码？（图文）

    关联源代码 1.删除工程里面的Android Depandencies,删除后会报错,不要理会.看下面 2.添加libs目录下的Android-support-v4.jar包 选中-->右键-- ...

  3. 使用 Azure CLI 2.0 从自定义磁盘创建 Linux VM

    本文说明如何在 Azure 中上传自定义的虚拟硬盘 (VHD) 或复制现有 VHD,并从自定义磁盘创建 Linux 虚拟机 (VM). 可以根据要求安装并配置 Linux 分发版,并使用该 VHD 快 ...

  4. Linux ->> Apt-get命令安装软件

    Apt全称Advanced Package Tool.Apt-get适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. 用法: apt-cache ...

  5. Visio2010新建E-R图

    visio2010没有内置E-R图的模板,需要自己配置模具.步骤如下: 1.文件->新建->基本流程图->右键菱形->添加到新模具->命名为E-R图. 2.更多形状-&g ...

  6. Python Json获取天气预报

    #!/usr/bin/python # -*- coding: UTF-8 -*- import json import smtplib import urllib from email.mime.t ...

  7. July 13th 2017 Week 28th Thursday

    No dream is too big, and no dreamer is too small. 梦想再大也不嫌大,追梦的人再小也不嫌小. Hold on to your dreams, but b ...

  8. 如何将程序添加到Windows桌面右键菜单

    在Windows桌面上右键单击鼠标时,将显示默认菜单.如果您想要将其它程序添加到Windows桌面右键菜单中,则可以按照以下步骤执行: 运行WinUtilities上下文菜单管理器 点击添加 选择菜单 ...

  9. 制作炫酷雪花背景的jQuery插件

    插件使用十分简单,代码已经放至我的GitHub,大家可以下载以及使用或者更新改进代码. HTML代码源码: <!DOCTYPE html> <html> <head> ...

  10. 将POST请求转换为DELETE、PUT等请求的方法

    一.在WEB工程的web.xml文件中配置HiddenHttpMethodFilter 二.form 表单中添加一个隐藏域 name="_method" value="D ...