首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

jQuery实现的简单分页示例

- Author -

郑文亮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 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
TcpServer(1) Sqlite(2) Fragment(1) ICF-5900W(2) EventBus(1) Spring Boot(5) Spring-Retry(1) muduo(1) pt-archiver(1) 多线程(6)
You might like
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
python抓取最新博客内容并生成Rss
2015/05/17 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python实现梯度下降法
2020/03/24 Python
幼儿教师思想汇报
2014/01/10 职场文书
培训主管岗位职责
2014/02/01 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
会计专业导师推荐信
2014/03/08 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
运动会口号大全
2014/06/07 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年安全月活动总结
2015/03/26 职场文书
中秋节感想
2015/08/10 职场文书
详解python的内存分配机制
2021/05/10 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis