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操作文本框readOnly
May 15 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
js中onload与onunload的使用示例
2013/08/25 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue实现文字加密功能
2019/09/27 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
银行职业规划书范文
2013/12/28 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2014年征兵标语
2014/06/20 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
早会开场白台词大全
2015/06/01 职场文书
复兴之路观后感
2015/06/02 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
使用Python拟合函数曲线
2022/04/14 Python
Python日志模块logging用法
2022/06/05 Python