Pagination not updating number of pages on select change

user1532468 Source

I have a script that paginates pages in a table, which works fine. I also have a dropdown to select how many records to show in the table. Although this works, if I select say 20 records the pagination does not update to reflect the change.

When the table is run, the default records to show is 8 whih makes 9 pages. But if I select 20 in the drop down it still says 9 and if I go to page 9 it is obviously empty. I am also wondering if it is possible to have the script appear in both before and after the table. the reson for this is if a user gets to the bottom of say 100 records, then I would like this feature so they don't have to go all the way back to the top.

I would appreciate any help as my javascript is not 100%. Many thanks

UPDATE: From what i gather i have to re-rendering the inside the repaginate() function. Keep the where it is but move the bit that renders the actual pages inside the repaginate() function. Tried various options but not working. Any idea how I can do this as I am really struggling with it. Thanks

php html

<?php
    echo "<table class='paginated' cellspacing='0' cellpadding='0'>";
    echo "<div class='pager'></div>";
    echo "<thead><tr><th style='width: 5%;'>#</th><th>Service</th><th>Activity</th><th>Dept</th><th>Company</th><th>Address</th><th>User</th><th>Item</th><th>Date</th><th style='width: 19%;'>Action</th></tr></thead>";

    while($row = mysqli_fetch_array($result)){

    $id = $row['id'];
    $service = $row['service'];
    $activity = $row['activity'];
    $dept = $row['department'];
    $company = $row['company'];
    $address = $row['address'];
    $user = $row['user'];
    $box = $row['item'];
    $date = $row['date'];
    $date = date('d-m-Y h:i:s', strtotime($date));
    $edit = "<button type='button' class='btn btn-primary edit'>Edit</button>";
    $action = "<button type='button' class='btn btn-success action'>Action</button>";
    $delete = "<button type='button' class='btn btn-danger delete'>Delete</button>";

    // each looped row

    echo "<tr><td>".$id."</td><td>".$service."</td><td>".$activity."</td><td>".$dept."</td><td>".$company."</td><td>".$address."</td><td>".$user."</td><td>".$box."</td><td>".$date."</td><td>".$edit. ' ' .$action. ' ' .$delete."</td></tr>";

    } // End while loop
    echo "</table><br /><br /></div>";
?>

js

$('table.paginated').each(function() {
  var currentPage = 0;
  var numPerPage = 8;
  var $table = $(this);
  $table.bind('repaginate', function() {
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  });
  $table.trigger('repaginate');
  var numRows = $table.find('tbody tr').length;
  var numPages = Math.ceil(numRows / numPerPage);
  var $pager = $('<div class="pager"></div>');
  for (var page = 0; page < numPages; page++) {
    $('<span class="page-number"></span>').text(page + 1).bind('click', {
      newPage: page
    }, function(event) {
      currentPage = event.data['newPage'];
      $table.trigger('repaginate');
      $(this).addClass('active').siblings().removeClass('active');
    }).appendTo($pager).addClass('clickable');
  }
  $pager.insertBefore($table).find('span.page-number:first').addClass('active');
  var $numberPicker = $('<div class="numberPicker"></div>');
  var dropdown = $('<select class="options"></select>');
  $([5, 10, 20]).each(function() {
    var $num = this;
    $('<option></option>').text(this).attr('value', this).appendTo(dropdown);
  });
  dropdown.bind('change', function() {
    numPerPage = this.value;
    $table.trigger('repaginate');
  }).insertBefore($table);
});
javascriptphpjquery

Answers

comments powered by Disqus