欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)示例

 更新時(shí)間：2016年06月01日 12:50:44   作者：鄭文亮  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單分頁(yè),涉及jQuery數(shù)學(xué)運(yùn)算與頁(yè)面元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)。分享給大家供大家參考，具體如下：

<!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分頁(yè)Class - 風(fēng)干的果子</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頁(yè)面加載開(kāi)始
$(function()
{
  var pageDiv1=new jsPage("list","all","p1","3");
  pageMethod.call(pageDiv1);
  var pageDiv2=new jsPage("list2","all","p2","5");
  pageMethod.call(pageDiv2);
})//$
//jquery 頁(yè)面加載結(jié)束
//方法: pageMethod
function pageMethod()
{
  var obj=this;
  obj.resetTotal();
  obj.reloadpage("1",obj.list_class);
  obj.page(); //生成頁(yè)碼
  ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
  var obj=this;
  $("#"+obj.page_obj_id+" a").live("click",function()
  { //點(diǎn)擊頁(yè)碼的時(shí)候跳到相應(yīng)頁(yè)
  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 結(jié)果集UL的id
  // list_class 要顯示的類別
  // page_id 存放頁(yè)碼的id
  // pagesize 每頁(yè)顯示多少條
  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); //存放頁(yè)碼的div
  this.list_class=list_class; // 類別
  if(list_class=="all")
  {
    this.results=this.li.length; // 總記錄數(shù)等于所有記錄
  }
  else
  {
    this.results=$("#"+list_id+" li."+list_class).length; // 總記錄數(shù)等于指定類別的li數(shù)
  }
  this.totalpage; // 總頁(yè)數(shù)
  this.pagesize=pagesize; //每頁(yè)記錄數(shù)
  this.cpage=1; //當(dāng)前頁(yè),默認(rèn)顯示第一頁(yè)
  this.count;
  this.target_p;
  this.curcount;
  this.outstr= ""; // 輸出頁(yè)碼html
}//jsPage結(jié)束
//方法: gotopage
function gotopage(target){
  this.cpage = target;    //把頁(yè)面計(jì)數(shù)定位到第幾頁(yè)
  this.page();
  this.reloadpage(target,this.list_class);
}
//給對(duì)象jsPage 增加函數(shù) 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();
    }
  }
}
//給對(duì)象jsPage 增加函數(shù) 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 對(duì)象增加函數(shù) page
jsPage.prototype.page=function()
{
  if(this.totalpage<=10)
  {    //總頁(yè)數(shù)小于十頁(yè)  頁(yè)碼以十頁(yè)為單位
    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)
  {    //總頁(yè)數(shù)大于十頁(yè)
    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+"' >&raquo;</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)+"' >&laquo;<\/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)+"' >&laquo;<\/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)+"' >&raquo;</a>";
        }
      }
      this.outstr = this.outstr + lastP;
    }
  }
  document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"頁(yè) 第"+this.cpage+"頁(yè)<\/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="#">音樂(lè)</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">音樂(lè)A</li>
    <li class="movie">電影A</li>
    <li class="music">音樂(lè)B</li>
    <li class="movie">電影B</li>
    <li class="music">音樂(lè)C</li>
    <li class="movie">電影C</li>
    <li class="music">音樂(lè)D</li>
    <li class="movie">電影D</li>
    <li class="music">音樂(lè)E</li>
    <li class="movie">電影E</li>
    <li class="music">音樂(lè)F</li>
    <li class="movie">電影F</li>
  </ul>
  <br />
  <div id="p2">
  </div>
</body>
</html>

PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開(kāi)發(fā)過(guò)程中會(huì)用得到：

在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress

PHP代碼在線格式化美化工具：
http://tools.jb51.net/code/phpformat

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論