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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
js添加事件的通用方法推荐
May 15 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
javascript事件问题
2009/09/05 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Django如何自定义分页
2018/09/25 Python
简单了解python的内存管理机制
2019/07/08 Python
HTML的form表单和django的form表单
2019/07/25 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python异步Web框架sanic的实现
2020/04/27 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
英国在线药房:Express Chemist
2019/03/28 全球购物
简单英文演讲稿
2014/01/01 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
师德师风建设方案
2014/05/08 职场文书
创业计划书之酒店
2019/08/30 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
详解Python生成器和基于生成器的协程
2021/06/03 Python
MySQL中order by的使用详情
2021/11/17 MySQL