jQuery客户端分页实例代码
更新时间:2013年11月18日 15:46:45 作者:
这篇文章主要介绍了jQuery客户端分页实例代码,有需要的朋友可以参考一下
复制代码 代码如下:
<script src="/js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var pageindex = 1;
var pagesize = 2;
$(function () {
previous();
})
function previous() {
if (pageindex < 1 || pageindex == 1) {
pageindex = 1;
$("#imgdiv img:lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
}
else {
pageindex--;
if (pageindex != 1) {
$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
}
if (pageindex == 1) {
$("#imgdiv img:lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
}
}
}
function next() {
var p = $("#imgdiv img").length / pagesize;
var pagecount = parseInt(Math.ceil(p));
if (pageindex + 1 > pagecount) {
pageindex = pagecount;
} else {
pageindex++;
}
$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
}
</script>
<div>
<a href="javascript:previous()">上一页</a>
<div id="imgdiv">
<img src="/images/001.jpg" alt="第一页的第一张"/>
<img src="/images/002.jpg" />
<img src="/images/003.jpg" />
<img src="/images/004.jpg" />
<img src="/images/005.jpg" />
</div>
<a href="javascript:next()">下一页</a>
</div>
您可能感兴趣的文章:
- jquery分页插件jpaginate在IE中不兼容问题
- jquery分页对象使用示例
- 使用PHP+JQuery+Ajax分页的实现
- jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
- jquery.pagination.js 无刷新分页实现步骤分享
- jquery.pagination +JSON 动态无刷新分页实现代码
- 基于jquery封装的一个js分页
- jQuery中jqGrid分页实现代码
- jQuery EasyUI API 中文文档 - Pagination分页
- 用jQuery中的ajax分页实现代码
- 一款Jquery 分页插件的改造方法(服务器端分页)
- 基于Jquery实现表格动态分页实现代码
- 基于jquery实现的表格分页实现代码
- 基于jQuery的实现简单的分页控件
- 基于JQuery的Pager分页器实现代码
- 基于jQuery的js分页代码
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- jquery+json实现的搜索加分页效果
- php jquery 实现新闻标签分类与无刷新分页
- jquery pagination插件实现无刷新分页代码
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
- jQuery插件分享之分页插件jqPagination
最新评论