bootstrap分页

开源中国有一篇介绍的很详细，链接： https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样，需要引入如下文件： <link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.1.js"></script> <script type="text/javascript" src="js/bootstrap-paginator.js"></script> 使用实例： jsp代码 <div class="padlr" align="right"> 　　<ul id="data-pagination" class="pagination"> 　　<li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a><

参考: http://www.jb51.net/article/76093.htm 如前所述, 不要什么都想到 jquery的 脚本js, 应该首先推荐的是 css 和 元素本身的事件 函数 如:　onclick, select选择框的 onchange="search()" 函数方法. Aria: a:ri2, 咏叹调, aria-label通常是放在bootstrap的标签中, 用来做为描述信息的 比较成熟的js 分页器控件: (自带js代码的操作: 是基于bootstrap的 bootsrtapPaginator) 参考: http://blog.csdn.net/guying4875/article/details/50685860 各个参数的含义: 有5种组件结构, 即整个控件 上的操作按钮的类型: type,为：'first', prev, page, next, 'last'. 如果要为一个元素添加多个类, 则使用addClass('cls1 cls2') 多个类之间 用 "空格" 而不是用 "逗号"隔开, 否则会把 逗号看作是一类的 一部分, 而实际上就没有包含 逗号的类 $("p").addClass("selected"); $("p").addClass("selected1 selected2"); 不管是你原来就写的 静态的html代码中的元素, 还是 由

Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。 分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页。 <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> .disabled, .active 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> .pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。 <ul class="pagination pagination-lg">...</ul> <ul

分页 应用于页面数据特别多的情况 作用： 加快数据查询速度 方便用户操作 利于页面的布局 思路： 确定表中总的数据行数 计算页面数量：页数 = 总行数 / 每页行数 编写分页查询的方法 select * from 表名 limit 开始行数,长度 包装数据到Java对象中，发送给JSP 包装分页数据的实体类： public class Page<T> { //每页的行数 public static final int PAGE_SIZE = 10; //保存分页的数据 private List<T> data; //保存页面数量 private int pageCount; //保存当前页数 private int currentPage; .... } 确定表中总的数据行数 select count(*) from 表 在JdbcUtils中添加查询行数的方法 这个方法有点复杂其实，dbtuils中有个专门做聚合函数查询的函数是很好用的 /** * 查询行数 */ public static int queryCount(String sql,Object... params){ try { return runner.query(sql, new ResultSetHandler (){ @Override public Integer handle(ResultSet rs)

本章将讲解Bootsrtap支持分页的特性，分页(pagination),是一种无序列表，bootstrap像处理其它界面元素一样处理分布。 分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页。 <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> .disabled, .active 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> .pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。 <ul class="pagination pagination-lg">...</ul> <ul

前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能。 在实现交互良好的页面翻页功能时，往往还需要配合使用后端分页框架pagehelper。pagehelper框架于前端而言，主要作用是将分页数据pageInfo从后端传入到前端。 接下来给一个应用小栗子： step1 我们需要在jsp页面所需要显示翻页选项的位置插入一个<ul>标签，并指定id，如下： <ul id="pagination"></ul> step2 下载并引用bootstrap-paginator.js文件,并在jsp页面引入代码如下： <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script> step3 在<script>标签中调用bootstrapPaginator初始化页面，示例代码如下： <script> $(function(){ // 使用bootstrap paginator初始化页面 $('#pagination').bootstrapPaginator({ bootstrapMajorVersion:3, //pageInfo.pageNum是当前页面的页码 currentPage:${pageInfo.pageNum}, //pageInfo