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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
Ant Design的Table组件去除
Oct 24 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版本的几种方法小结
2008/03/25 PHP
php创建多级目录的方法
2015/03/24 PHP
laravel自定义分页效果
2017/07/23 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python request中文乱码问题解决方案
2020/09/17 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
学习委员自我鉴定
2014/01/13 职场文书
学校消防安全责任书
2014/07/23 职场文书
政风行风整改报告
2014/11/06 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
初中运动会前导词
2015/07/20 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记