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

【问题标题】：converting simple pagination in javascript into jquery code将javascript中的简单分页转换为jquery代码
【发布时间】：2011-04-02 02:27:53
【问题描述】：

我有一个用原始 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 有相同的可能性

但我不知道该怎么做！

如果我点击下一个或上一个按钮，它应该只更改页面

【问题讨论】：

标签： javascript jquery ajax pagination

【解决方案1】：

您可能想改用 jQuery 分页插件，它们开箱即用，您只需指定您的设置：

【讨论】：

【解决方案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>

【讨论】：