jQuery实现的简单分页示例


Posted in Javascript onJune 01, 2016

本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS分页Class - 风干的果子</title>
<style type="text/css">
a {margin:3px; text-decoration:none;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//jquery页面加载开始
$(function()
{
  var pageDiv1=new jsPage("list","all","p1","3");
  pageMethod.call(pageDiv1);
  var pageDiv2=new jsPage("list2","all","p2","5");
  pageMethod.call(pageDiv2);
})//$
//jquery 页面加载结束
//方法: pageMethod
function pageMethod()
{
  var obj=this;
  obj.resetTotal();
  obj.reloadpage("1",obj.list_class);
  obj.page(); //生成页码
  ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
  var obj=this;
  $("#"+obj.page_obj_id+" a").live("click",function()
  { //点击页码的时候跳到相应页
  obj.target_p=parseInt($(this).attr("p"));
  gotopage.call(obj,obj.target_p);
  })
}
// 方法: showClass
function showClass(list,x,pDiv,pSize){
  var pObj=new jsPage(list,x,pDiv,pSize);
  pageMethod.call(pObj);
}
// 方法: jsPage
function jsPage(list_id,list_class,page_obj_id,pagesize)
{
  // list_id 结果集UL的id
  // list_class 要显示的类别
  // page_id 存放页码的id
  // pagesize 每页显示多少条
  this.list_obj_id=list_id;
  this.list_Obj=$("#"+list_id);
  this.li=$("#"+list_id+" li");
  this.li.hide();
  this.page_obj_id=page_obj_id;
  this.page_obj=$("#"+page_obj_id); //存放页码的div
  this.list_class=list_class; // 类别
  if(list_class=="all")
  {
    this.results=this.li.length; // 总记录数等于所有记录
  }
  else
  {
    this.results=$("#"+list_id+" li."+list_class).length; // 总记录数等于指定类别的li数
  }
  this.totalpage; // 总页数
  this.pagesize=pagesize; //每页记录数
  this.cpage=1; //当前页,默认显示第一页
  this.count;
  this.target_p;
  this.curcount;
  this.outstr= ""; // 输出页码html
}//jsPage结束
//方法: gotopage
function gotopage(target){
  this.cpage = target;    //把页面计数定位到第几页
  this.page();
  this.reloadpage(target,this.list_class);
}
//给对象jsPage 增加函数 reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
  this.li.hide();
  for(var i=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++)
  {
    if(resultType=="all")
    {
    this.li.eq(i).show();
    }else
    {
    $("#"+this.list_obj_id+" li."+resultType).eq(i).show();
    }
  }
}
//给对象jsPage 增加函数 resetTotal
jsPage.prototype.resetTotal=function()
{
  if(this.results==0){
    this.totalpage=0;
    this.cpage=0;
  }else if(this.results<=this.pagesize)
  {
    this.totalpage=1;
  }
  else if(parseInt(this.results/this.pagesize)==1)
  {
    this.totalpage=2;
  }
  else if(parseInt(this.results/this.pagesize)>1 && this.results%this.pagesize==0){
    this.totalpage=this.results/this.pagesize;
  }
  else
  {
    this.totalpage=parseInt(this.results/this.pagesize)+1;
  }
}//resetTotal()
//jsPage 对象增加函数 page
jsPage.prototype.page=function()
{
  if(this.totalpage<=10)
  {    //总页数小于十页  页码以十页为单位
    for (this.count=1;this.count<=this.totalpage;this.count++)
    {
      if(this.count!=this.cpage)
      {
        this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
      }else
      {
        this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>";
      }
    }
  }
  if(this.totalpage>10)
  {    //总页数大于十页
    if(parseInt((this.cpage-1)/10) == 0)
    {
      for (this.count=1;this.count<=10;this.count++)
      {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
      }
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >»</a>";
    }
    else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10))
    {
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
      for (this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++)
       {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
      }
    }
    else
    {
      var lastP;
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
      for (this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++)
      {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
        if(this.count==this.totalpage)
        {
          lastP="";
        }
        else
        {
          lastP="<a href='javascript:void(0)' p='"+(this.count+1)+"' >»</a>";
        }
      }
      this.outstr = this.outstr + lastP;
    }
  }
  document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"页 第"+this.cpage+"页<\/span>" + this.outstr + "<\/div>";
  this.outstr = "";
}
  </script>
</head>
<body>
  <a onclick="showClass('list','mm','p1','3')" href="#">美女</a> <a onclick="showClass('list','gg','p1','3')"
    href="#">帅哥</a> <a onclick="showClass('list','all','p1','3')" href="#">全部</a><br />
  <ul id="list">
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="gg">帅哥G</li>
    <li class="gg">帅哥H</li>
    <li class="gg">帅哥G</li>
  </ul>
  <br />
  <div id="p1">
  </div>
  <br />
  <br />
  <a onclick="showClass('list2','music','p2','5')" href="#">音乐</a> <a onclick="showClass('list2','movie','p2','5')"
    href="#">电影</a> <a onclick="showClass('list2','all','p2','5')" href="#">全部</a><br />
  <ul id="list2">
    <li class="music">音乐A</li>
    <li class="movie">电影A</li>
    <li class="music">音乐B</li>
    <li class="movie">电影B</li>
    <li class="music">音乐C</li>
    <li class="movie">电影C</li>
    <li class="music">音乐D</li>
    <li class="movie">电影D</li>
    <li class="music">音乐E</li>
    <li class="movie">电影E</li>
    <li class="music">音乐F</li>
    <li class="movie">电影F</li>
  </ul>
  <br />
  <div id="p2">
  </div>
</body>
</html>

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

PHP代码在线格式化美化工具:
http://tools.3water.com/code/phpformat

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
vue实现匀速轮播效果
Jun 29 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 #Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 #Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 #Javascript
深入理解ECMAScript的几个关键语句
Jun 01 #Javascript
星期几的不同脚本写法(推荐)
Jun 01 #Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 #Javascript
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
多版本Python共存的配置方法
2017/05/22 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
详解python的argpare和click模块小结
2019/03/31 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
高考励志标语
2014/06/05 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014年除四害工作总结
2014/12/06 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Python实现抖音热搜定时爬取功能
2022/03/16 Python