Convert simple pagination in javascript to jquery code

Question

I have a simple pagination code that was written with raw javascript codes

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;
      }
}

and i need to have the same opportunity with jquery

but I don’t know how to do it!

it should only change the page if I click the next or previous button

Answer 1

Instead, you can use jQuery swap plugins, and they work out of the box, you just specify your settings:

• Pagination ( demo )
• Creating a jQuery pagination system ( Demo )

Answer 2

, . click . , HTML-, #MTForumBlock:

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

     // stop the link 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 :

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