0

我正在使用一个 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>
4

2 回答 2

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，它不能被覆盖）。

于 2013-06-19T09:53:07.820 回答
0

那是因为有 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();
 });
于 2013-06-19T05:04:30.607 回答