jquery 客户端分页代码示例

发布时间:2020-10-29编辑:脚本学堂
jquery客户端分页代码的例子,常见的分页代码都是服务端程序实现的,如何在客户端实现内容分页,分享一段jquery分页代码,需要的朋友参考下。

例子,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();
  } // www.jb200.com
  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" />
  <img src="/images/003.jpg" />
  <img src="/images/004.jpg" />
  <img src="/images/005.jpg" />
 </div>
 <a href="javascript:next()">下一页</a>
</div>