bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

jQuery實現(xiàn)ajax無刷新分頁頁碼控件

這段時間在做公司項目的時候需要用到ajax進行分頁（點擊頁碼也是無刷新的顯示上一頁或下一頁的內(nèi)容，不是一般的選擇跳轉），但是在網(wǎng)上找了一下，大部分分頁插件都是直接刷新跳轉的，感覺和我的需求差距比較大，就自己動手寫了一個可以實現(xiàn)自己需要的功能的js來實現(xiàn)這個控件，實現(xiàn)的效果如下：

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設|網(wǎng)站維護公司|優(yōu)化|托管以及網(wǎng)絡推廣，積累了大量的網(wǎng)站設計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設計服務，案例作品覆蓋木制涼亭等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結合品牌形象的塑造，量身開發(fā)品質網(wǎng)站。

jQuery實現(xiàn)ajax無刷新分頁頁碼控件 

因為業(yè)務需要，我需要在一個頁面創(chuàng)建多個這樣的頁碼控件（有些是在ajax中生成的），顯然為每一個控件寫一個專屬的js是不現(xiàn)實的，所以，我將公共部分提取出來，然后通過傳入的選擇器不同，對不同的控件進行相應方法的調用。

下面是該控件實現(xiàn)的js代碼：

// JavaScript Document
$(function(){
  //點擊分頁按鈕觸發(fā)
  $("#pageGro li").live("click",function(){
    var pageNum = parseInt($(this).html());//獲取當前頁數(shù)
    //獲取當前評價分類的總頁數(shù)
    var totalnum = type+""+praise;
    if(pageCount[parseInt(totalnum)] > 5){
      pageGroup(pageNum,pageCount[parseInt(totalnum)]);
    }else{
      $(this).addClass("on");
      $(this).siblings("li").removeClass("on");
    }
    loadData(pageNum);//這個方法里面就是ajax獲取數(shù)據(jù)的代碼，為了讓這個頁碼控件能夠更通用，我將這個方法寫在調用這個js的php頁面中，這樣使得這個頁碼控件能應用于更多的場景中。
  });
  //點擊上一頁觸發(fā)
  $("#pageGro .pageUp").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount);
    if(pageCount[parseInt(totalnum)] > 5){//初始默認顯示1-5頁（若真實頁碼小于五，則根據(jù)真實頁碼數(shù)顯示）
      var pageNum = parseInt($(this).children("li.on").html());//獲取當前頁
      pageUp(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $("#pageGro ul li.on").index();//獲取當前頁
      console.log("index = "+index);
      if(index > 0){
        $(this).next().find("li").removeClass("on");//清除所有選中
        $(this).next().find("ul li").eq(index-1).addClass("on");//選中上一頁
        loadData(index);
      }
    }
  });
  //點擊下一頁觸發(fā)
  $("#pageGro .pageDown").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount[parseInt(totalnum)]);
    if(pageCount[parseInt(totalnum)] > 5){
      var pageNum = parseInt($(this).children("li.on").html());//獲取當前頁
      pageDown(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $(this).children("ul li.on").index()+1;//獲取當前頁
      console.log(index);
      if(index+1 < pageCount[parseInt(totalnum)]){
        $(this).prev().find("li").removeClass("on");//清除所有選中
        $(this).prev().find("ul li").eq(index+1).addClass("on");//選中下一頁
        loadData(index+2);
      }
    }
  });
});
//點擊跳轉頁面
function pageGroup(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,0);
    break;
    case 2:
      page_icon(1,5,1);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,3);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,4);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,2);
    break;
  }
}
//根據(jù)當前選中頁生成頁面點擊按鈕
function page_icon(page,count,eq,element){
  var $this = element;
  var ul_html = "";
  for(var i=page; i<=count; i++){
    ul_html += "<li>"+i+"</li>";
  }
  $this.children("ul").html(ul_html);
  console.log($this.children("ul li:eq("+eq+")"));
  $this.find("ul li:eq("+eq+")").addClass("on");
}
//上一頁
function pageUp(pageNum,pageCount){
  switch(pageNum){
    case 1:
    break;
    case 2:
      page_icon(1,5,0);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,2);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,3);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,1);
    break;
  }
}
//下一頁
function pageDown(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,1);
    break;
    case 2:
      page_icon(1,5,2);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,4);
    break;
    case pageCount:
    break;
    default:
      page_icon(pageNum-2,pageNum+2,3);
    break;
  }
}
//生成分頁按鈕
function createBtn(pageCount, element){
  if(pageCount>5){
    page_icon(1,5,0,element);
  }else{
    page_icon(1,pageCount,0,element);
  }
}

頁面上該頁碼控件按鈕的代碼

<div id="pageGro" class="cb">
  <div class="pageUp">上一頁</div>
  <div class="pageList">
    <ul>
     <!--頁碼顯示區(qū) -->
    </ul>
  </div>
  <div class="pageDown">下一頁</div>
</div>

頁面上寫的用于被該頁碼控件調用實現(xiàn)無刷新加載數(shù)據(jù)的ajax方法

//ajax獲取點擊分頁按鈕應該加載的數(shù)據(jù)
function loadData(pageNum){
  console.log("type = "+type +", praise = " + praise);
  var beChangeElement = '';
  switch(type){
  case 0: beChangeElement += "#togivineva ";break;
  default:;
  case 1: beChangeElement += "#givineva ";break;
  }
  switch(praise){
  default:;
  case 0:beChangeElement += ".praiseAll";break;
  case 1:beChangeElement += ".praiseBad";break;
  case 2:beChangeElement += ".praiseNormal";break;
  case 3:beChangeElement += ".praiseGood";break;
  }
  $.ajax({
    type:"Get",
    url:你要請求的url地址,
    data:{page:pageNum},
    dataType:'json',
    success:function(data){
      var info = data.info;
      if(info.length > 0){//判斷ajax回來的數(shù)據(jù)是否為空
        var s = '';
        beChangeElement = $(beChangeElement);
        console.log(beChangeElement);
        beChangeElement.children("div.detail-content").remove();
        $.each(info, function(index,v){
          s="你ajax出來要填補到頁面上的數(shù)據(jù)";
          beChangeElement.children("#pageGro").before(s);//表示將s中的內(nèi)容填充到相應頁碼控件前面
        });
      }else{
        var t = "<p style='text-align:center;margin:20px;font-size:18px;color:#999;'>暫時還沒有內(nèi)容哦！</p>";
        beChangeElement.html(t);
      }
    },
  });
}

到此，該頁碼控件的使用就完成了。

在其中需要注意的內(nèi)容如下：

1.大家都可以看到我在ajax中用beChangeElement這個變量來表示我選中的選擇器時，是把該選擇器的標簽以字符串的形式存儲在變量中，在需要調用的時候才使用$()轉換為選擇器。為什么我不能在前面就直接把選擇器賦給變量呢。因為jQuery不允許你選擇不存在的選擇器。這么說，可能就要有疑問了，什么樣的情況下我要選擇的選擇器會不存在？（第一種情況：你把選擇器的名字寫錯了，所以jquery找不到（我相信大多數(shù)人是不會犯這個錯誤的）。第二種情況：在我們使用ajax進行數(shù)據(jù)交互的時候，有很多頁面上的標簽和數(shù)據(jù)是我們通過ajax傳遞顯示在頁面上的，這些標簽數(shù)據(jù)在頁面初始化階段是不存在的，但是我們寫的js方法，非觸發(fā)事件（除點擊事件，鼠標懸浮等需要交互的時間）都會在頁面初始化的裝載階段被解釋執(zhí)行，所以就會存在變量獲取到不存在的選擇器使得值為空阻斷后續(xù)對這個選擇器進行js操作），如果你在使用的時候發(fā)現(xiàn)js對某個選擇器的操作失效了，就可以考慮一下這樣的情況

2.ajax生成出來的頁面內(nèi)容不能跟之前頁面初始化時生成的內(nèi)容一樣被頁面原有的js控制。因為這涉及到一個異步和同步的問題，在頁面渲染的時候會將對應的js綁定到相應的html標簽上，等待事件觸發(fā)，但是因為ajax出來的頁面內(nèi)容出現(xiàn)在頁面原有的js之后，所以js無法未卜先知的去綁定它。所以我們需要根據(jù)事件冒泡機制，將需要對ajax生成出來的頁面內(nèi)容進行操作的js委托給該內(nèi)容的父標簽進行處理（我們一般選用標簽作為這樣的父標簽，但是要注意的是，不要一次性委托太多的js在標簽上，不然使得頁面變得很龐大，頁面的處理速度會變慢），委托事件可以表示如下：

1.$("body").on('click', ".cumulative-eva a",function(){});//click:表示要委托的事件類型（這里表示要委托的事件是點擊事件），".cumulative-eva a"：觸發(fā)事件的選擇器名字（這里表示觸發(fā)點擊事件的選擇器是$(.cumulative-eva a)），function里面寫觸發(fā)事件后js對該事件的處理代碼。

2.$(".cumulative-eva a").live("click",function(){});

3.在js中我寫了這么一條js語句來選中上一頁，語句如下：

$(this).next().find("ul li").eq(index-1).addClass("on");//選中上一頁

有的人就會想在這里為什么不用children()，用children()是否也可以？那么，在解釋這個問題之前我們先來看看children()和find()的區(qū)別。

區(qū)別如下：

關于遍歷:children()是對當前選中的選擇器標簽進行編號，對于該選擇器標簽的子類標簽無論多少個都當成一個整體，不對其進行區(qū)分。而find()則是對當前選中的選擇器標簽下面的子孫類標簽進行編號，通過編號可以找到相對應的某一個子孫類標簽。

從以上的描述我們很顯然知道children()并不適用于我們這樣一個應用場景，因為我們需要選中$(this)下的某一個li，這個用children()是做不到的。那么什么樣的情況下可以使用children()呢，看下面這段js：

var pageNum = parseInt($(this).children("li.on").html());//獲取當前頁

在這個應用場景下因為頁碼控件的特殊性，被加上“on”這個class的li標簽同一時間頁面上只可能有一個，所以用children()去遍歷$(this)找他的子類被加上“on”這個class的li標簽，只可能返回一個結果，而不是一個數(shù)組，所以在這樣的場景下可以使用children()標簽。

以上為我寫頁碼控件的全部內(nèi)容，至此mark一下。最后放上該頁碼控件的css代碼，讓大家參考參考，至于控件所用的圖片，我直接上傳到css代碼后面，你們需要的時候保存下來使用就行。(作為一個懶人，可供下載的源碼包啥的我就不弄了，太麻煩，如果有興趣的朋友，以后有時間的時候我再弄一份出來吧~)

頁碼控件css樣式:

/* CSS Document */
/*分頁*/
#pageGro{ width:400px; height:25px; margin:20px auto;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;}
#pageGro .pageUp{ text-indent:23px; background:url(../img/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{ text-indent:5px; background:url(../img/pageDown.png) 46px 6px no-repeat;}

頁碼控件中使用的上下頁圖標：

jQuery實現(xiàn)ajax無刷新分頁頁碼控件
jQuery實現(xiàn)ajax無刷新分頁頁碼控件

以上所述是小編給大家介紹的jQuery實現(xiàn)ajax無刷新分頁頁碼控件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

分享文章：jQuery實現(xiàn)ajax無刷新分頁頁碼控件
文章鏈接：http://vcdvsql.cn/article22/poogcc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、虛擬主機、網(wǎng)站設計、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)