第一种Bootstrap 实例 - 默认的分页

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 默认的分页</title>

   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

<div ><h1>第1页</h1></div>

<ul class="pagination">

 <li><a href="1.html">&laquo;</a></li>

  <li><a href="1.html">1</a></li>

  <li><a href="2.html">2</a></li>

  <li><a href="3.html">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">&raquo;</a></li>

</ul>

</body>

</html>

jquery pagination 分页控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Pagination Demo I - Simple pagination</title>

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

        <link rel="stylesheet" href="demo.css" />

        <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>

        <script type="text/javascript" src="lib/jquery.pagination.js"></script>

        <script type="text/javascript">

            function pageselectCallback(page_index, jq){

                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();

                $('#Searchresult').empty().append(new_content);

                return false;

            }

            function initPagination() {

                // count entries inside the hidden content

                var num_entries = jQuery('#hiddenresult div.result').length;

                // Create content inside pagination element

                $("#Pagination").pagination(num_entries, {

                    callback: pageselectCallback,

                    items_per_page:1 // Show only one item per page

                });

             }

            // When document is ready, initialize pagination

            $(document).ready(function(){

                initPagination();

            });

        </script>

    </head>

    <body>

        <br style="clear:both;" />

        <div id="Searchresult">

            This content will be replaced when pagination inits.

        </div>

         <div class="searchresult_pagination"></div>

        <br style="clear:left;">

        <!-- Container element for all the Elements that are to be paginated -->

        <div id="hiddenresult" style="display:none;">

            <div class="result"><p>Globally maximize granular

                "outside the box" thinking vis-a-vis quality niches. Proactively formulate 24/7

                results whereas 2.0 catalysts for change. Professionally implement 24/365 niches

                rather than client-focused users.</p>

                <p>

                Competently engineer high-payoff "outside the box" thinking through cross

                functional benefits. Proactively transition intermandated processes through

                open-source niches. Progressively engage maintainable innovation and extensible

                interfaces.</p>

            </div>

            <div class="result"><p>Credibly fabricate e-business models for end-to-end niches.

                Compellingly disseminate integrated e-markets without ubiquitous services.

                Credibly create equity invested channels with multidisciplinary human capital.</p>

                <p>

                Interactively integrate competitive users rather than fully tested

                infomediaries. Seamlessly initiate premium functionalities rather than impactful

                architectures. Rapidiously leverage existing resource-leveling processes via

                user-centric portals.</p>

            </div>

            <div class="result"><p>Monotonectally initiate unique

                e-services vis-a-vis client-centric deliverables. Quickly impact parallel

                opportunities with B2B bandwidth. Synergistically streamline client-focused

                infrastructures rather than B2C e-commerce.</p>

                <p>

                Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.

                Completely facilitate high-quality systems without stand-alone strategic theme

                areas.</p>

             </div>

                <div class="result"><p>Monotonectally initiate unique

                e-services vis-a-vis client-centric deliverables. Quickly impact parallel

                opportunities with B2B bandwidth. Synergistically streamline client-focused

                infrastructures rather than B2C e-commerce.</p>

                <p>

                Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.

                Completely facilitate high-quality systems without stand-alone strategic theme

                areas.</p>

             </div>

        </div>

    <div id="Pagination"></div>

    </body>

</html>

分页

https://github.com/gbirke/jquery_pagination

Bootstrap 静态分页 和 jquery_pagination插件 动态分页的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  2. 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  3. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  4. LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  5. Tornado-基于正则的路由和动态分页

    概览 这一小节涉及了三部分内容: 1.动态分页设计 2.基本的路由系统以及基于正则的路由 3.模块引擎的继承和导入 4.web项目文件夹和ReuquestHandler的分类 5.跨站脚本攻击 文件结 ...

  6. layui结合mybatis的pagehelper插件的分页通用的方法

    总体思路: 1.前台查询的时候将当前页和页大小传到后台 2.后台将当前页,页大小以及数据与数据总数返回前台,前台显示完表格完数据之后显示分页插件. 前台页面: 准备查询条件的表单,与数据表格,分页di ...

  7. ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

    0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.

  8. springboot结合mybatis使用pageHelper插件进行分页查询

    1.pom相关依赖引入 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...

  9. Mybatis: 插件及分页

    Mybatis采用责任链模式,通过动态代理组织多个拦截器(插件),通过这些拦截器可以改变Mybatis的默认行为(诸如SQL重写之类的). Mybatis支持对Executor.StatementHa ...

随机推荐

  1. JavaScript可否多线程? 深入理解JavaScript定时机制（转载）

    说明:最近写 js 时需要用setinterval函数做定时操作,谁知道,刚开始后运行完好,但一段时间后他就抽风了,定时任务运行的时间间隔越来越短,频率加快,这是一个完全不能容忍的问题,带着一个可以出 ...

  2. Truck History--poj1789

    Truck History Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 21534   Accepted: 8379 De ...

  3. Hough Transform直线检测

    本文原创,如转载请注明出处. Hough Transform 是一种能提取图像中某种特定形状特征的方法,可以将其描述成一种把图像空间中的像素转换成Hough空间中直线或曲线的一种映射函数.通过利用Ho ...

  4. Linux下安装并启动MongDB

    1.下载MongoDB 下载链接: http://www.mongodb.org/downloads 2.解压下载的压缩包 tar -zxvf mongodb-linux-x86_64-3.2.8.t ...

  5. js django 数据互动

    后台传输到客户端的数据怎么跟js进行互动 eval("("+{{data|safe}}+")") 获取到的数据可以直接使用 eval 有时候会存在编码问题所以推 ...

  6. cf C. Quiz

    http://codeforces.com/contest/337/problem/C 得到的分数为:(2^1+2^2+...+2^X)*k + m-X*k = (2^(X+1)-2)*k + m-X ...

  7. 开发反模式(GUID) - 伪键洁癖

    一.目标:整理数据 有的人有强迫症,他们会为一系列数据的断档而抓狂. 一方面,Id为3这一行确实发生过一些事情,为什么这个查询不返回Id为3的这一行?这条记录数据丢失了吗?那个Column到底是什么? ...

  8. Linux上的设备管理器

    一般windows上我们用它自带的“设备管理器”来查看,管理,安装,卸载驱动. 那么问题来了,Linux上用什么命令来看呢? 可以用: lshw   lsusb lspci lsmod 查看特定模块. ...

  9. 2015第16周六学习java建议

    学习Java 建议: 尽量用 google 查找技术资料. 有问题在 stackoverflow 找找,大部分都已经有人回答. 多看官方的技术文档. ibm developerworkers 的文章质 ...

  10. C++初始化列表问题

    C++初始化列表问题,类中有一个对象类型的数组成员变量,在初始化列表中初始化时报错“[]”操作符语法错误 class ClassA{private ClassB arrayOfObjectClassB ...