jQuery分頁插件

Question

希望這是容易解決的問題。我在理解jQuery Pagination插件時遇到了一些問題。

本質上，我試圖做的是加載一個PHP文件，然後分頁結果。我試圖脫離他們的榜樣，但我並沒有獲得我期待的結果。

這裏的JavaScript的：

function pageselectCallback(page_index, jq){ 
      var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone(); 
      $('#Searchresult').empty().append(new_content); 
      return false; 
     } 
     function initPagination() { 
      var num_entries = $('#hiddenresult div.result').length; 
      // Create pagination element 
      $("#Pagination").pagination(num_entries, { 
       num_edge_entries: 2, 
       num_display_entries: 8, 
       callback: pageselectCallback, 
       items_per_page:3 
      }); 
     }  
     $(document).ready(function(){  
      $('#hiddenresult').load('load.php', null, initPagination); 
     });  

這裏是我的HTML（PHP的加載後）：

 <div id="Pagination" class="pagination"> </div> 
     <br style="clear:both;" /> 
     <div id="Searchresult"> </div> 

     <div id="hiddenresult" style="display:none;"> 
     <div class="result">Result #1</div> 
     <div class="result">Result #2</div> 
     <div class="result">Result #3</div> 
     <div class="result">Result #4</div> 
     <div class="result">Result #5</div> 
     <div class="result">Result #6</div> 
     <div class="result">Result #7</div> 
     </div> 

基本上，我想每個頁面上展示 「3」 項目，但該不管用。我假設在某個地方，我將需要在我的JS中創建一個for循環，但我對如何這樣做感到困惑。 The documentation can be found here。

Answer 1

你甚至不需要使用for循環，只需使用jQuery的slice()方法和一些數學運算。

我託管在JS斌一個工作演示：http://jsbin.com/upuwe（通過http://jsbin.com/upuwe/edit編輯）

下面是修改後的代碼：

var pagination_options = { 
    num_edge_entries: 2, 
    num_display_entries: 8, 
    callback: pageselectCallback, 
    items_per_page:3 
} 
function pageselectCallback(page_index, jq){ 
    var items_per_page = pagination_options.items_per_page; 
    var offset = page_index * items_per_page; 
    var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone(); 
    $('#Searchresult').empty().append(new_content); 
    return false; 
} 
function initPagination() { 
    var num_entries = $('#hiddenresult div.result').length; 
    // Create pagination element 
    $("#Pagination").pagination(num_entries, pagination_options); 
}