编程 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 相关文章推荐

很多人都是用下面的js刷新站IP和PV

Sep 05 Javascript

给文字加上着重号的JS代码

Nov 12 Javascript

javascript unicode与GBK2312(中文)编码转换方法

Nov 14 Javascript

jquery获得keycode的示例代码

Dec 30 Javascript

JQuery中使用ajax传输超大数据的解决方法

Jul 14 Javascript

js+css实现有立体感的按钮式文字竖排菜单效果

Sep 01 Javascript

JS正则表达式之非捕获分组用法实例分析

Dec 28 Javascript

微信小程序实战之运维小项目

Jan 17 Javascript

从零学习node.js之mysql数据库的操作（五）

Feb 24 Javascript

vue移动端屏幕适配详解

Apr 30 Javascript

如何自定义微信小程序tabbar上边框的颜色

Jul 09 Javascript

微信小程序调用微信授权窗口相关问题解决

Jul 25 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