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 相关文章推荐
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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中cookies使用指南
2007/03/16 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
js获取和设置属性的方法
2014/02/20 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
js数组去重的hash方法
2016/12/22 Javascript
JS变量及其作用域
2017/03/29 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python将文本转换成图片输出的方法
2015/04/28 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python如何实现线程间通信
2020/07/30 Python
英国著名书店:Foyles
2018/12/01 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
怎么写好自荐信
2013/10/30 职场文书
社区七一党员活动方案
2014/01/25 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
暑假生活随笔
2015/08/15 职场文书
六年级数学教学反思
2016/02/16 职场文书
导游词之凤凰古城
2019/10/22 职场文书