Update pagination after ajax call

[poorbaldrick]

What is the in-function version? Thanks Also paste it in the main function or as seperate code in the search click

[m_hutley]

the bit you copied. You dont need to re-declare the function in the local scope, because it’s (now) already in the global scope. So remove it from where you copied it.

[poorbaldrick]

I am getting error saying $pager1 is undefined. I have posted the code I have used. Have i got it right. Thanks

$(function() {
  $('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 8;
    var $table = $(this);
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager1 = $('<div class="pager"></div>');
    var $pager2 = "";
    var $numberPicker = $('<div class="numberPicker"></div>');
    var dropdown = $('<select class="options"></select>');
    var dropdown2 = "";
    $table.bind('repaginate', function() {
      $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
     //Start copying here.
    
    //Stop copying here.
    rePage(numPages);
    $pager1.insertBefore($table);
    $pager2.insertAfter($table);
    $('span.page-number:first-child').addClass('active');
    $([5, numPerPage, 10, 20]).each(function() {
      var $num = this;
      $('<option></option>').text(this).attr('value', this).appendTo(dropdown);
    });
    dropdown.bind('change', function() {
      var oldNumPerPage = numPerPage;
      numPerPage = this.value;
      numPages = Math.ceil(numRows / numPerPage);
      $table.trigger('repaginate');
      rePage(numPages);
      currentPage = Math.ceil((currentPage * oldNumPerPage) / numPerPage);
      $("span.page-number:eq(" + currentPage + ")").trigger('click');
      $('.options').val(numPerPage);
      $('.options2').val(numPerPage);
    }).insertBefore($pager2);
    dropdown2 = dropdown.clone(true);
    dropdown2.addClass('options2');
    dropdown2.insertAfter($pager1);
    $('.options').val(numPerPage);
    $('.options2').val(numPerPage);
  });
});
function rePage(numPages) {
      $('.page-number').remove();
      for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
          newPage: page
        }, function(event) {
          var selected = $(this).index();
          var selected2 = ($(this).index()) + numPages;
          currentPage = event.data['newPage'];
          $table.trigger('repaginate');
          $('span.page-number').removeClass('active');
          $("span.page-number").each(function(index) {
            if (index === selected) {
              $(this).addClass('active');
              $("span.page-number:eq(" + selected2 + ")").addClass('active')
            }
          });
        }).appendTo($pager1).addClass('clickable');
      }
      $pager2 = $pager1.clone(true);
      $pager2.insertAfter($table);
    }

[poorbaldrick]

Gotta pop out for a while. i’ll check back with you later. Thanks for all your help.

[m_hutley]

I should have actually checked and it just clicked into my head… the intention of this is to have no more than 1 such paginated table on the page at any given time, correct?

[poorbaldrick]

Not sure what you mean. At the moment the default amount of records to display is 8 which creates 6 pages of pagination because there are 48 records. After a search however, if there are say 20 results, this will create 3 pages and so on.

At the moment, when I perform a search, on the success call, i empty the table and populate with the results from php. So i guess, yes there will only be 1 paginated table on the page at any given time. The default or the search results. Cheers