Несколько 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, который не должен быть перегружен).