文档章节

jQuery 分页插件 jPages 使用

雷霄骅
 雷霄骅
发布于 2014/08/16 13:47
字数 340
阅读 247
收藏 2

jQuery 分页插件 jPage实现了javascript分页。操作很傻瓜,在此记录一下。

 使用方式如下:

1.引入头文件(注意一定要把jQuery放在前面):

此处使用了动画效果

<!-- 使用插件的时候一定要引入jQuery!!!-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<!-- jPage -->
  <link rel="stylesheet" href="css/jpage/jPages.css"/>
  <link rel="stylesheet" href="css/jpage/animate.css"/>
  <script src="js/jpage/jPages.min.js"></script>
   <script>
  $(function(){
    $("div.holder").jPages({
      containerID : "itemContainer",
      previous : "←",
      next : "→",
      perPage : 20,
      delay : 100
    });
  });
</script>


2.需要分页的<table>的<tbody>上(注意:不一定非得是<table>,也可以是<ul>等)的id标记为“itemContainer”,表明这里面放的是一行一行的内容。

class属性为“holder”的<div>用于放置“1”“2”“3”或者“Next”这类的导航链接。

注:本代码直接从SSH项目中拷贝出来,因此有EL等标签,可以忽略。

<div class="post_section">
  <h3>管理员信息</h3>
	<div class="holder"></div>
	<table id="alltable" cellspacing="0" class="tablesorter">
	<thead>
		<tr>
			<th>ID</th>
			<th>登录名</th>
			<th>姓名</th>
			<th>级别</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody id="itemContainer">
		<c:forEach items="${alladmin}" var="admin">
		<tr>    
			<td>${admin.id}</td>
			<td>${admin.loginname}</td>
			<td><a href="AdminReadByID_Admin2Action.action?adminid=${admin.id}">${admin.name}</a></td>
			<td>${admin.level}</td>
			<td><a href="AdminReadByID_Admin2Action.action?adminid=${admin.id}">查看</a>|
				<a href="AdminEditRead_Admin2Action.action?adminid=${admin.id}">编辑</a>|
				<a class="confirm" href="AdminDelete_Admin2Action.action?adminid=${admin.id}">删除</a>
			</td>
		</tr>
		</c:forEach>
		</tbody>
	</table> 
</div>


jPages项目主页: http://luis-almeida.github.io/jPages/index.html

jPages下载:http://download.csdn.net/detail/leixiaohua1020/6376509


本文转载自:http://blog.csdn.net/leixiaohua1020/article/details/12650563

雷霄骅
粉丝 205
博文 419
码字总数 2129
作品 4
朝阳
程序员
私信 提问
分享一个jQuery的超酷分页插件 - jPages

日期:2012-4-18 来源:GBin1.com 在线演示 本地下载 jQuery的分页插件很多,但是大都的功能都比较简单,今天我们分享一个非常酷的分页插件 - jPages,拥有丰富的功能和特效,大家肯定会喜欢...

gbin1
2012/04/18
0
0
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
10.7K
12
2月份热门的 24 个 jQuery 插件

1. turn.js turn.js 是一个实现类似书本翻页的网页效果的JS库。 2. jQuery Scroll Path It's a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines a......

红薯
2012/03/01
2.6K
5
jQuery.bsgrid 1.21 发布 简单易用的jQuery Grid插件

jQuery.bsgrid 简单易用的jQuery Grid插件 jquery bsgrid,A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件,支持分页或不分页,支持......

bs2004
2014/10/17
6.8K
17
CSDN找了好几天都人回答我的问题,祈求开源中国顺利帮我解决问题,请问下jpages有没有最全的分页

http://www.oschina.net/search?scope=project&q=jpages 我找了个这个,但是这个不全 谁能帮帮我弄下,拜托大神们了。 这个有缺点就是 没有显示当前页面 页数总数 还有数量总数 每页显示数量...

赵立成
2014/01/21
1K
18

没有更多内容

加载失败,请刷新页面

加载更多

我最喜欢的Mybatis 3.5新特性——Optional支持

Mybatis 3.5 发布有段时间了,终于支持了 Optional ,这么实用的特性,竟然还没人安利……于是本文出现了。 文章比较简单,但非常实用,因为能大量简化恶心的判空代码。 WARNING 由于本文非常...

周立_ITMuch
12分钟前
3
0
Android 开发工具推荐

简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家。: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你看到不同库的大小和,帮助你...

极光推送
12分钟前
0
0
高并发解决方案

我们通常衡量一个Web系统的吞吐率的指标是QPS(Query Per Second,每秒处理请求数),解决每秒数万次的高并发场景,这个指标非常关键。举个例子,我们假设处理一个业务请求平均响应时间为100...

孤狼悲月
18分钟前
0
0
Kubernetes 中的渐进式交付:蓝绿部署和金丝雀部署

本文首发于:Jenkins 中文社区 渐进式交付是持续交付的下一步, 它将新版本部署到用户的一个子集,并在将其滚动到全部用户之前对其正确性和性能进行评估, 如果不匹配某些关键指标,则进行回...

Jenkins中文社区
23分钟前
2
0
大数据辟谣:布洛芬用药不慎可能致死?如此标题党居心何在

相信很多人看到一则“布洛芬用药不慎可能致死”的消息后,内心开始慌乱了。 (新闻来源:微博热搜排行榜) 毕竟健康是每一个人最关注的话题,而布洛芬也是很多人止痛(发烧头痛、喉咙痛、牙痛...

forespider
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部