Bootstrap 静态分页 和 jquery_pagination插件 动态分页
第一种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>
分页
https://github.com/gbirke/jquery_pagination
Bootstrap 静态分页 和 jquery_pagination插件 动态分页的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...
- 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- Tornado-基于正则的路由和动态分页
概览 这一小节涉及了三部分内容: 1.动态分页设计 2.基本的路由系统以及基于正则的路由 3.模块引擎的继承和导入 4.web项目文件夹和ReuquestHandler的分类 5.跨站脚本攻击 文件结 ...
- layui结合mybatis的pagehelper插件的分页通用的方法
总体思路: 1.前台查询的时候将当前页和页大小传到后台 2.后台将当前页,页大小以及数据与数据总数返回前台,前台显示完表格完数据之后显示分页插件. 前台页面: 准备查询条件的表单,与数据表格,分页di ...
- ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)
0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.
- springboot结合mybatis使用pageHelper插件进行分页查询
1.pom相关依赖引入 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...
- Mybatis: 插件及分页
Mybatis采用责任链模式,通过动态代理组织多个拦截器(插件),通过这些拦截器可以改变Mybatis的默认行为(诸如SQL重写之类的). Mybatis支持对Executor.StatementHa ...
随机推荐
- NAS4Free 安装配置（二）系统安装
NAS4Free系统安装 看一看BIOS设置 开机按DEL进BIOS 改日期时间 这里可以设置RAID,因为ZFS的RAID功能更好,所以我们在这里不配置RAID 制作LiveUSB 用软件(USB ...
- Maven+SpringMVC+Mybatis 开发环境整合
1.maven build遇到了如下问题: [ERROR] Failed to execute goal org.codehaus.mojo:tomcat-maven-plugin:1.1:rede ...
- MyEclipse安装Eclipse Memory Analyzer插件，并进行错误文件分析流程
在看深入JVM虚拟机一书(p50,2.4 实战OutOfMemoryError),有一个Java堆溢出的例子,使用到了Eclipse Memory Analyzer插件,由于自己现在使用的是MyEcl ...
- 自学Python的点滴
1.第一天 注释 ——任何在#符号右面的内容都是注释. 注释主要作为提供给程序读者的笔记. 程序应该包含这两行 #!/user/bin/python #Filename:**.py 2.在程序中打开P ...
- ubuntu vim YCM
http://blog.sina.com.cn/s/blog_499386b00100rxm1.html http://www.cnblogs.com/junnyfeng/p/3633697.html
- Android 之Activity切换动画效果
在Activity中Android提供了overridePendingTransition(int enterAnim,int exitAnim)这个方法用于设置Activity之间切换的动画效果.o ...
- CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)的内部网络结构有什么区别？
https://www.zhihu.com/question/34681168 CNN(卷积神经网络).RNN(循环神经网络).DNN(深度神经网络)的内部网络结构有什么区别?修改 CNN(卷积神经网 ...
- MySQL数据备份之mysqldump
mysqldump常用于MySQL数据库逻辑备份 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dum ...
- 安全：加固你的ssh 登录
SSH 是我们控制虚拟主机的一种途径,这个途径可以让我们拥有完全的控制权,如果对于这个控制权没有进行很好的安全处理,那么将会造成很大的安全问题. 我们可以在系统的日志文件 (例如:/var/ ...
- ios 导航栏和旋屏
1,状态栏(UIStatusBar) http://my.oschina.net/shede333/blog/304560 2,visibleViewController和topViewControl ...