多个jQuery分页在一个页面

Question

我正在使用一个jQuery插件，它使我能够对我的内容进行分页。

http://jsbin.com/upuwe/434/edit 

问题是我想在同一页上有多个这样的表。

我试图在没有任何运气的情况下复制标头中的JavaScript调用。你有什么想法？

<script> 
    var pagination_options = { 
     num_edge_entries: 2, 
     num_display_entries: 8, 
     callback: pageselectCallback, 
     items_per_page:10 
    } 
    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); 
    } 

    function pageselectCallback(page_index, jq){ //duplicate 
     var items_per_page = pagination_options.items_per_page; 
     var offset = page_index * items_per_page; 
     var new_content = $('#hiddenresult1 div.result').slice(offset, offset + items_per_page).clone(); 
     $('#Searchresult1').empty().append(new_content); 
     return false; 
    } 

    function initPagination() { //duplicate 
     var num_entries = $('#hiddenresult1 div.result').length; 
     // Create pagination element 
     $("#Pagination1").pagination(num_entries, pagination_options); 
    }  

    $(document).ready(function(){  
     initPagination(); 
    });   
</script> 

Answer 1

那是因为有2个功能具有相同的名称和参数列表， 尝试以下操作：

var pagination_options = { 
    num_edge_entries: 2, 
    num_display_entries: 8, 
    callback: pageselectCallback1, 
    items_per_page:10 
} 

var pagination_options1 = { 
    num_edge_entries: 2, 
    num_display_entries: 8, 
    callback: pageselectCallback1, 
    items_per_page:10 
} 

function initPagination() { 
    var num_entries = $('#hiddenresult div.result').length; 
    // Create pagination element 
    $("#Pagination").pagination(num_entries, pagination_options); 
} 

function initPagination1() { 
    var num_entries = $('#hiddenresult div.result').length; 
    // Create pagination element 
    $("#Pagination1").pagination(num_entries, pagination_options1); 
} 

function pageselectCallback(page_index, jq){ 
    var items_per_page = pagination_options.items_per_page; 
    var offset = page_index * items_per_page; 
    var new_content = $('#hiddenresult1 div.result').slice(offset, offset + items_per_page).clone(); 
    $('#Searchresult').empty().append(new_content); 
    return false; 
} 

function pageselectCallback1(page_index, jq){ 
    var items_per_page = pagination_options1.items_per_page; 
    var offset = page_index * items_per_page; 
    var new_content = $('#hiddenresult1 div.result').slice(offset, offset + items_per_page).clone(); 
    $('#Searchresult1').empty().append(new_content); 
    return false; 
} 

$(document).ready(function(){  
    initPagination(); 
    initPagination1(); 
});   

Answer 2

你可以与封装的基本分页功能，并接受参数的函数做到这一点控制精确的行为。

下面，我命名的函数pag：

$(document).ready(function() { 
    var pag = function($container, $content, opts, fn) { 
     opts = opts || {}; 
     fn = fn || (function(){}); // a callback 
     var options = { // default pagination options 
      items_per_page: 10, 
      num_edge_entries: 2, 
      num_display_entries: 8, 
      callback: function(page_index, jq) { 
       var offset = page_index * options.items_per_page; 
       fn($content.slice(offset, offset + options.items_per_page).clone()); 
       return false; 
      } 
     }; 
     return $container.pagination($content.length, $.extend(options, opts)); 
    }; 

    // ************ 

    //First pagination - default options. 
    pag($("#Pagination1"), $('#hiddenresult1 div.result'), {}, function(new_content) { 
     $('#Searchresult1').html(new_content); 
    }); 

    //Second pagination - custom options. 
    pag($("#Pagination2"), $('#hiddenresult2 div.result'), { 
     num_edge_entries: 3, 
     num_display_entries: 6 
    }, function(new_content) { 
     $('#Searchresult2').html(new_content); 
    }); 
}); 

正如你可以在第二个例子中看到，默认选项全部或任何可以被覆盖（除callback，必须不能被重写）。