首先对js和css的引用

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

初始化分页控件

　　<div id="page"></div>
　　<script type="text/javascript">
        $(function(){
            var options={
                bootstrapMajorVersion:1,    //版本
                currentPage:1,    //当前页数
                numberOfPages:5,    //最多显示Page页
                totalPages:10,    //所有数据可以显示的页数
                onPageClicked:function(e,originalEvent,type,page){

}
            }
            $("#page").bootstrapPaginator(options);
        })
    </script>

如果bootstrapMajorVersion:1 时，则上面的分页标签用 div

如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul

其中：currentPage 是当前你所在的页数　　numberOfPages 是分页按钮可见的最多数　　totalPages 是所有数据能分的页数（这些 options（选项）是在初始化分页控件的时候使用的。）

在onPageClicked 事件中  page 参数标识你点击页数时所在的页数。

完整代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8"/>

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

    <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>

    <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>

</head>

<body>

    <div id="page"></div>

    <script type="text/javascript">

        $(function(){

            var options={

                bootstrapMajorVersion:1,    //版本

                currentPage:1,    //当前页数

                numberOfPages:5,    //最多显示Page页

                totalPages:10,    //所有数据可以显示的页数

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

                    console.log("e");

                    console.log(e);

                    console.log("originalEvent");

                    console.log(originalEvent);

                    console.log("type");

                    console.log(type);

                    console.log("page");

                    console.log(page);

                }

            }

            $("#page").bootstrapPaginator(options);

        })

    </script>

</body>

</html>

bootstrap-paginator 分页控件的使用的更多相关文章

  1. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  2. angular+bootstrap+MVC 之三，分页控件初级版

    今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...

  3. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  4. 给AspNetPager分页控件添加bootstrap样式

    AspNetPager分页控件算是比较好用的一个分页控件了.想要结合bootstrap使用,官方代码入口 .pagination a[disabled]{ color: #777;cursor: no ...

  5. MvcPager分页控件以适用Bootstrap

    随笔- 9  文章- 0  评论- 33  修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)   软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...

  6. 基于avalon+jquery做的bootstrap分页控件

    刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...

  7. Bootstrap Paginator分页插件的使用

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

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

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

  9. Bootstrap Paginator分页插件+ajax

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

  10. asp.net分页控件

    一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Reg ...

随机推荐

  1. 关于在transform下的子元素设置fixed无效的困惑

    最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...

  2. 教训 Mac下装windows系统 失败后 磁盘空间丢失

    本来Mac上装的是win10 最近老提示快过期了 想到月底就要停止免费更新了 决定装一下win8 然后升级到win10 因为之前有过装win10的经验 所以很轻松 进入Mac 先到bootcamp 取 ...

  3. python学习第十四天 -面向对象编程基础

    python也是支持面向对象编程的.这一章节主要讲一些python面向对象编程的一些基础. 什么是面向对象的编程? 1.面向对象编程是一种程序设计范式 2.把程序看做不同对象的相互调用 3.对现实世界 ...

  4. Python番外之 阻塞非阻塞，同步与异步，i/o模型

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端: 同步:      所谓同步,就 ...

  5. iOS学习之懒加载

    懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,其实是重写getter方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 使用懒 ...

  6. 摘录 javescript 常用函数

     

  7. ubuntu 终端只显示当前目录名称

    修改.bashrc文件: 原来: #修改终端提示颜色 color_prompt=yes if [ "$color_prompt" = yes ]; then PS1='${debi ...

  8. [LeetCode 121] - 买入与卖出股票的最佳时机(Best Time to Buy and Sell Stock)

    问题 假设你有一个数组,其中的第i个元素表示一只股票在第i天的价格. 如果只允许你完成一次交易(即买入并卖出股票一次),设计一个找出最大利润的算法. 初始思路 和122一样,基于买入与卖出股票的最佳时 ...

  9. 用keil直接生成BIN文件

    1.下载hex2bin到keil的任意目录,下载地址:http://www.keil.com/download/docs/7.asp 或者 http://www.hex2bin.com/files/h ...

  10. 各类XML parser的比较

    基于以上的比较 再为公司的项目选择解析器的时候,我选择Xerces.准备把Qt自带的XML库给去掉. references: http://stackoverflow.com/questions/17 ...