jquery pagination插件动态分页实例(Bootstrap分页)


Posted in Javascript onDecember 23, 2016

第一种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">«</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="#">»</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>

分页效果:

jquery pagination插件动态分页实例(Bootstrap分页)

源码:https://github.com/gbirke/jquery_pagination

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
详解jQuery中的DOM操作
Dec 23 #Javascript
Bootstrap table两种分页示例
Dec 23 #Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 #Javascript
Bootstrap和Java分页实例第二篇
Dec 23 #Javascript
js实现键盘自动打字效果
Dec 23 #Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 #Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python内置加密模块用法解析
2019/11/25 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python 从list中随机取值的方法
2020/11/16 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
装饰活动策划方案
2014/02/11 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Python数组变形的几种实现方法
2022/05/30 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers