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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
JS常用跨域方法实现原理解析
Dec 09 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_MySQL教程-第一天
2007/03/18 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php判断变量类型常用方法
2012/04/24 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
全面了解js中的script标签
2016/07/04 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
pandas分区间,算频率的实例
2019/07/04 Python
python中如何写类
2020/06/29 Python
StringBuilder和String的区别
2015/05/18 面试题
小学生打架检讨书
2014/01/26 职场文书
小学生作文评语
2014/04/18 职场文书
安全施工标语
2014/06/07 职场文书
土地转让协议书
2014/09/27 职场文书
2014年工商所工作总结
2014/12/09 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python