converting simple pagination in javascript into jquery code

Question

hey guys

i have a simple pagination pagination code that had been writen 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 possiblity with jquery

but i don know how to do that !

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

Answer 1

You might want to use the jQuery pagination plugins instead and they work out of the box, you just specify your settings:

• Pagination (Demo)
• Making a jQuery pagination system (Demo)

Answer 2

Sure, not a problem. The following uses the multiple selector to attach a click event handler to your previous and next buttons. It then uses the load method to get the HTML that you will use to populate your #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;
     });

)};

The HTML would look something like this:

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