Javascript

 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Tutorialized ForumsWeb Design & DevelopmentJavascript

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Tutorialized Forums Sponsor:
  #1  
Old February 15th, 2018, 07:11 AM
peter_c peter_c is offline
Registered User
Tutorialized Newbie (0 - 499 posts)
 
Join Date: Feb 2018
Posts: 0 peter_c User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 13 m 50 sec
Reputation Power: 0
Pagination not updating number of pages on select change

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

Quote:
PS: From what i gather i have to re-rendering the inside the repaginate() function. Keep the<div class="pager"> 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 Code:
<?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>";
?>

Code:
$(function() {
$('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');
  }).insertAfter($table);
});
});

Reply With Quote
Reply

Viewing: Tutorialized ForumsWeb Design & DevelopmentJavascript > Pagination not updating number of pages on select change


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 

Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap