jquery處理分頁問題

Question

我有一個mysql數據庫，我正在使用jquery做一個像魅力一樣工作的實時搜索。但我已經嘗試了很多方法來爲我的搜索結果進行調查。

下面是我的jQuery代碼

$(document).ready(function(){ 
    /* 
    Set the inner html of the table, tell the user to enter a search term to get started. 
    We could place this anywhere in the document. I chose to place it 
    in the table. 
    */ 
    $.get('data/search-data.php', function(returnData) { 
     $('#results').html(returnData); 
    }); 

    /* When the user enters a value such as "j" in the search box 
    * we want to run the .get() function. */ 
    $('#searchData').keyup(function() { 

     /* Get the value of the search input each time the keyup() method fires so we 
     * can pass the value to our .get() method to retrieve the data from the database */ 
     var searchVal = $(this).val(); 

     /* If the searchVal var is NOT empty then check the database for possible results 
     * else display message to user */ 
     if(searchVal !== '') { 

      /* Fire the .get() method for and pass the searchVal data to the 
      * search-data.php file for retrieval */ 
      $.get('data/search-data.php?searchData='+searchVal, function(returnData) { 

       /* If the returnData is empty then display message to user 
       * else our returned data results in the table. */ 
       if (!returnData) { 
        $('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>'); 
       } else { 
        $('#results').html(returnData); 
       } 
      }); 
     } else { 
      $.get('data/search-data.php?searchData='+searchVal, function(returnData) { 
       $('#results').html(returnData); 
      }); 
     } 

    }); 

}); 

Answer 1

一個簡單的解決方案，而無需鑽研JavaScript對象和/或模板從服務器返回的頁面是這樣的：

<div data-page="1" class="results"> 
    <ul> 
     <li>Result 1</li> 
     <li>Result 2</li> 
    </ul> 
</div> 
<div data-page="2" class="hidden results"> 
    <ul> 
     <li>Result 3</li> 
     <li>Result 4</li> 
    </ul> 
</div> 
<div data-page="3" class="hidden results"> 
    <ul> 
     <li>Result 4</li> 
     <li>Result 5</li> 
    </ul> 
</div> 
<div id="pager"></div> 

然後創建尋呼機與jquery上的ajax回調鏈接：

var links = []; 
$('.results').each(function(i) { 
    var link = $('<a />', { 
     text: i+1, 
     href: '#' 
    }); 
    links.push(link); 
}); 
$('#pager').html(links); 

然後點擊處理程序將ggle頁面的顯示：

$('#pager').on('click', 'a', function() { 
    var i = $(this).index(); 
    $('.results').eq(i).removeClass('hidden').siblings('.results').addClass('hidden'); 
    return false; 
}); 

DEMO：http://jsfiddle.net/Ry7NJ/1/