第一种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. 自定义View—坐标系

    一.android默认坐标系 二.View 的 getXxx()的坐标系 三.event的坐标系

  2. uva1368 DNA Consensus String

    <tex2html_verbatim_mark> Figure 1. DNA (Deoxyribonucleic Acid) is the molecule which contains ...

  3. Nutshell.ThreadWorkerPool .Net线程池设计

    功能描述: 支持创建多个线程池,并统一管理 支持不同线程池的容量控制,以及最少活动线程的设置 支持不同线程池中活动线程的闲时设置,即线程空闲时间到期后即自动被回收 结构设计: ThreadWorker ...

  4. [Ioi2007]Miners 矿工配餐(BZOJ1806)

    [Ioi2007]Miners 矿工配餐 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 214  Solved: 128 Description 现有两 ...

  5. Effective Java2读书笔记-类和接口（五）

    第21条:用函数对象表示策略 这一条其实也没说啥,就是策略模式.碰到这种场景时,定义一个策略接口,然后不同策略子类实现它,主类包含这个接口的引用就可以了. 第22条:优先考虑静态成员类 嵌套类是指被定 ...

  6. man手册导出成txt,pdf,html的一些小技巧

    经常man一些shell命令,有时候有想导出来编辑或注释一下,所以要导出.方法有很多种,根据自己的实际需要觉得比较实用的记录下分享一下. 1.导出成txt man –t bash |col –b &g ...

  7. DDP和DDU什么区别

    DU/DDP 就是A发货给国外B,B只要呆在家里看电视,货会自动送上门,当中的所有运输清关等事情都是由A来负责(A可以委托货代来负责),区别就是DDU是不包括税金的,也就是货值的百分之多少,税金会在B ...

  8. libeXosip2(1-2) -- How-To initiate, modify or terminate calls.

    How-To initiate, modify or terminate calls. The eXtented eXosip stack eXosip2 offers a flexible API ...

  9. Hdu2860-Regroup(种类并查集)

    Problem Description When ALPC42 got to a panzer brigade, He was asked to build software to help them ...

  10. HDU1841——KMP算法

    这个题..需要对KMP的模板理解的比较透彻,以前我也只是会套模板..后来才知道..之会套模板是不行的..如果不能把握模板的每一个细节`,至少能搞清楚模板的每一个模块大体是什么意思.. 题意是给出两个串 ...