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. swoole 创建web服务器

    http_server.php $http = new swoole_http_server("0.0.0.0", 9501); // 请求监听事件 $http->on('r ...

  2. 落地生根两周年，微软Azure进入2.0时代

    By: 申元庆 微软亚太科技有限公司董事长 微软亚太研发集团首席运营官 微软中国云计算与企业总经理 仿佛就在转眼间,微软Azure已经在中国落地生根两年了. 长风破浪会有时,直挂云帆济沧海.微软云技术 ...

  3. linux下网络编程学习——入门实例ZZ

    http://www.cppblog.com/cuijixin/archive/2008/03/14/44480.html 是不是还对用c怎么实现网络编程感到神秘莫测阿,我们这里就要撕开它神秘的面纱, ...

  4. windows时间同步脚本

    #!/usr/bin/env python# -*- coding:UTF-8 -*-# 脚本用于windows时间同步,设置window计划任务每五分钟执行一次 import timeimport ...

  5. 为tcp的connect设置超时时间

    struct timeval tv = {timeout, 0}; 27   setsockopt(sockfd, SOL_SOCKET, SO_SNDTIMEO, &tv, sizeof(s ...

  6. poj 3414 Pots 【BFS+记录路径 】

    //yy:昨天看着这题突然有点懵,不知道怎么记录路径,然后交给房教了,,,然后默默去写另一个bfs,想清楚思路后花了半小时写了120+行的代码然后出现奇葩的CE,看完FAQ改了之后又WA了.然后第一次 ...

  7. 一.在Linux中for和cat遍历文件内容出现no space

    以前使用for var in file方式逐行读取文件内容的时候,都没有出现问题,但是今天使用如下代码,会出现“no space” ,目标数据文件内容为6.8M, # 写入临时文件,第一行不能写入 f ...

  8. HDU 1281 棋盘游戏 【二分图最大匹配】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1281 题意概括: 有N*M大的棋盘,要在里面放尽量多的“车”,求最多能放的车的个数,和为了放最多的车有多 ...

  9. Kali-linux攻击WordPress和其他应用程序

    今天越来越多的企业利用SAAS(Software as a Service)工具应用在他们的业务中.例如,他们经常使用WordPress作为他们网站的内容管理系统,或者在局域网中使用Drupal框架. ...

  10. jquery基础介绍-转

    学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程 ...