第一种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. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  2. JSON C# Class Generator是一个从JSON文本中生成C#内的应用程序

    JSON C# Class Generator是一个从JSON文本中生成C#内的应用程序 .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator   ...

  3. 使用filter统一设置编码

    1.写一个类EncodingFilter.java,实现javax.servlet.Filter(文件命名做到见名知意) package com.filter; import java.io.IOEx ...

  4. hdu 1142 A Walk Through the Forest

    http://acm.hdu.edu.cn/showproblem.php?pid=1142 这道题是spfa求最短路,然后dfs()求路径数. #include <cstdio> #in ...

  5. PowerShell远程连接主机进行会话

    Get-ExecutionPolicy #脚本的执行策略set-ExecutionPolicy 枚举值 不同的策略,执行脚本的权限不同 允许开启远程 Enable-PSRemoting 添加域账户或者 ...

  6. 一次处理ORA-07445的历险记(转)

    ORA-07445通常是Oracle调用操作系统的资源出错时出现的[@more@] 事前没有任何征兆,下午5点左右某个关键应用的17台oracle数据库上的数据库实例陆续宕机,赶紧查看alert_lo ...

  7. hdu 1853 最小费用流好题 环的问题

    Cyclic Tour Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others) Tota ...

  8. JS--回到顶部代码

    原文地址:http://www.cnblogs.com/liguiqiang1986/articles/3132023.html JS--回到顶部代码 <!DOCTYPE html PUBLIC ...

  9. SQLite-CONSTRAINTS(约束)

    SQLite – CONSTRAINTS(约束) 约束是数据列在表上执行的规则.这些是用来限制的数据类型可以进入一个表.这样可以确保数据的准确性和可靠性在数据库中. 级或表级约束可以列.列级约束是仅适 ...

  10. MySQL数据库配置主从服务器实现双机热备

    转自:http://www.cnblogs.com/cchun/p/3712637.html 一.安装MySQL 说明:在两台MySQL服务器192.168.21.169和192.168.21.168 ...