Question

我有一个简单的分页分页代码，用原始的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获取您将用于填充#MTForumBlock的HTML：

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看起来像这样：

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

将javascript中的简单分页转换为jquery代码

2 个答案: