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

您可以使用封装基本分页功能的函数执行此操作，并接受参数以控制精确行为。

下面，我将函数命名为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除外，不得覆盖）。

Answer 2

这是因为有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();
 });

一个页面上有多个jQuery分页

2 个答案: