Multiple jQuery pagination on one page

Question

I am working with a jQuery plugin which enables me to paginate my content.

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

The issue is that I want to have more than one of these tables on the same page.

I have tried to duplicate the JavaScript call in the header without any luck. Do you have any ideas?

 <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>

Can you please set up a jsfiddle for this so we can help you. It doesn't help just seeing the JS, we need the HTML/CSS as well. Not all of it, just enough to see what we are dealing with. — Precastic
– Precastic, Commented Jun 19, 2013 at 3:19
more than one of the table means what please specify it clearly — Ganesh Rengarajan
– Ganesh Rengarajan, Commented Jun 19, 2013 at 3:53

Beetroot-Beetroot · Accepted Answer · 2013-06-19 09:53:07Z

You could do this with a function that encapsulates your basic pagination functionality and accepts parameters to control the precise behaviour.

Below, I have named the function 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);
    });
});

As you can see in the second example, all or any of the default options can be overridden (except callback, which must not be overridden).

Rachit Doshi · Accepted Answer · 2013-06-19 05:24:33Z

Thats because there are 2 functions with same name and same parameters list, try the following:

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();
 });

Collectives™ on Stack Overflow

Multiple jQuery pagination on one page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related