轉換簡單的分頁中的JavaScript到jQuery代碼

Question

我有一個已經writen與原始的JavaScript代碼

function ChangeForumPage(e){ 
    if(busy == 0) 
    { 
     switch(e) 
     { 
      case "Next": 
       page = p+1; 
       p++; 
       break; 
      case "Prev": 
       if(p>1) 
       { 
        page = p-1; 
        p--; 
       } 
       break; 
     } 
     xmlHttp=GetXmlHttpObject(); 
     if (xmlHttp==null) 
      { 
      alert ("Your browser does not support AJAX!"); 
      return; 
      } 
     var url="MTForumsBlock.php?req=LastTopics&p="+page; 
     xmlHttp.onreadystatechange=ChangeForumPageProces; 
     xmlHttp.open("GET",url,true); 
     xmlHttp.send(null); 
    } 
} 

function ChangeForumPageProces(e){ 
    if(xmlHttp.readyState==4) 
     { 
     document.getElementById("MTForumBlock").innerHTML=xmlHttp.responseText; 
     document.getElementById("MTFloader").innerHTML=''; 
     busy = 0; 
     }else{ 
     document.getElementById("MTFloader").innerHTML='<img src="images/loader.gif" />'; 
     busy = 1; 
     } 
} 

簡單分頁分頁代碼，我需要有相同的方法可行使用jQuery

但我不知道該怎麼做！

如果我點擊一個或下一個按鈕，它應該只改變頁面

Answer 1

你可能想使用jQuery的分頁插件，而不是和他們的工作開箱即用，你只需指定設置：

• Pagination（Demo）
• Making a jQuery pagination system（Demo）

Answer 2

當然，不是問題。以下使用multiple selector將click event handler附加到您的上一個和下一個按鈕。然後，它使用load method讓您將用於填充HTML您#MTForumBlock：

var busy = false; 
var p = 1; 
$('#next, #prev').click(function(e){ 

    // stop the link's href from being followed 
    e.preventDefault(); 

    // check if we're in the middle of a request 
    if(busy) return; 
    busy = true; 

    // Update the page variable 
    if($(this).attr('id') == 'next'){ 
     p++; 
    } else if (p > 1) { 
     p--; 
    } 

    // Add the loader image 
    var loader = $('<img src="images/loader.gif" /'); 
    $('#MTFloader').append(loader); 
    $('#MTForumBlock').load('MTForumsBlock.php?req=LastTopics&p='+p, function() { 
     // Remove the loader image once the AJAX is finished and mark finished 
     loader.remove(); 
     busy = false; 
    }); 

)}; 

的HTML會是這個樣子：jQuery的代碼

<a href="" id="next">Next</a> 
<a href="" id="prev">Previous</a>