网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery实现的简单分页示例
内容
    本文实例讲述了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>美女A</li>
        <li>帅哥A</li>
        <li>美女B</li>
        <li>帅哥B</li>
        <li>美女C</li>
        <li>帅哥C</li>
        <li>美女D</li>
        <li>帅哥D</li>
        <li>美女E</li>
        <li>帅哥E</li>
        <li>美女F</li>
        <li>帅哥F</li>
        <li>美女G</li>
        <li>帅哥G</li>
        <li>美女H</li>
        <li>帅哥H</li>
        <li>美女A</li>
        <li>帅哥A</li>
        <li>美女B</li>
        <li>帅哥B</li>
        <li>美女C</li>
        <li>帅哥C</li>
        <li>美女D</li>
        <li>帅哥D</li>
        <li>美女E</li>
        <li>帅哥E</li>
        <li>美女F</li>
        <li>帅哥F</li>
        <li>美女G</li>
        <li>帅哥G</li>
        <li>美女H</li>
        <li>帅哥H</li>
        <li>美女A</li>
        <li>帅哥A</li>
        <li>美女B</li>
        <li>帅哥B</li>
        <li>美女C</li>
        <li>帅哥C</li>
        <li>美女D</li>
        <li>帅哥D</li>
        <li>美女E</li>
        <li>帅哥E</li>
        <li>美女F</li>
        <li>帅哥F</li>
        <li>美女G</li>
        <li>帅哥G</li>
        <li>美女H</li>
        <li>帅哥H</li>
        <li>美女A</li>
        <li>帅哥A</li>
        <li>美女B</li>
        <li>帅哥B</li>
        <li>美女C</li>
        <li>帅哥C</li>
        <li>美女D</li>
        <li>帅哥D</li>
        <li>美女E</li>
        <li>帅哥E</li>
        <li>美女F</li>
        <li>帅哥F</li>
        <li>帅哥G</li>
        <li>帅哥H</li>
        <li>帅哥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>音乐A</li>
        <li>电影A</li>
        <li>音乐B</li>
        <li>电影B</li>
        <li>音乐C</li>
        <li>电影C</li>
        <li>音乐D</li>
        <li>电影D</li>
        <li>音乐E</li>
        <li>电影E</li>
        <li>音乐F</li>
        <li>电影F</li>
      </ul>
      <br />
      <div id="p2">
      </div>
    </body>
    </html>
    希望本文所述对大家jQuery程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 22:50:27