编程 Javascript

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery pagination插件动态分页实例(Bootstrap分页)

- Author -

MAKE-IN-LEMON

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript实例教程(19) 使用HoTMetal(5)

Dec 23 Javascript

基于jquery实现的省市区级联无ajax

Sep 24 Javascript

jquery选择checked在ie8普通模式下的问题

Feb 12 Javascript

浅谈JSON中stringify 函数、toJosn函数和parse函数

Jan 26 Javascript

javascript实现抽奖程序的简单实例

Jun 07 Javascript

jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

Jun 12 Javascript

JavaScript提高网站性能优化的建议(二)

Jul 24 Javascript

jquery遍历标签中自定义的属性方法

Sep 17 Javascript

jQuery扩展_动力节点Java学院整理

Jul 05 jQuery

20个最常见的jQuery面试问题及答案

May 23 jQuery

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

Oct 25 Javascript

gulp构建小程序的方法步骤

May 31 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