I'm using this script to load my serverlist php file however it doesn't work with pagination it just refreshes the page and loads the same results from the first page. I'm not asking for someone to write out the fix for me but if someone could help point me in the right direction i would be grateful

<pre>
  <script type="text/javascript">
    function refreshData(){
      var display = document.getElementById("servers");
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "query/Examples/serverlist.php");
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          display.innerHTML = this.responseText;
        } else {
          display.innerHTML = "Loading...";
        };
      }
    }
  </script>
            
  <div id="servers" /><img src="includes/IMG/loading.gif"/>
</div>
</pre>

This is my serverlist.php file

<pre>
<?php
require_once('../../includes/connect.php');
$sql= "SELECT * FROM servers ORDER BY votes DESC";
$result = $db->query($sql); 
$row = $result->fetch(PDO::FETCH_ASSOC);

    require __DIR__ . '/../SourceQuery/bootstrap.php';

    use xPaw\SourceQuery\SourceQuery;
    $perPage = 5;

    // Calculate Total pages
    $stmt = $db->query('SELECT * FROM servers');
    $total_results = $stmt->fetchColumn();
    $total_pages = ceil($total_results / $perPage);

    // Current page
    $page = isset($_GET['page']) ? $_GET['page'] : 1;
    $starting_limit = ($page - 1) * $perPage;
    if($page < 1) { 
    header ("location: index.php");
    }

    // Query to fetch servers
    $q = "SELECT * FROM servers ORDER BY votes DESC LIMIT :start, :per_page";
    $query = $db->prepare($q);
    $query->bindParam(':start', $starting_limit, PDO::PARAM_INT);
    $query->bindParam(':per_page',$perPage, PDO::PARAM_INT);
    $query->execute();

    // Fetch all servers for current page
        $result = $query->fetchAll(PDO::FETCH_ASSOC);;
    ?>
    <div class="table-responsive">
  <table class="table table-striped table-hover table-borderless ">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Server</th>
        <th scope="col">IP</th>
        <th scope="col">Players</th>
        <th scope="col">Type</th>
        <th scope="col">Votes</th>
      </tr>
    </thead>
    <tbody>
    
    <?php
    $i = $page * $perPage -4;
foreach ($result as $row) {
$focus = $row['focus'];
$type = $row['type'];
    
    $Timer = microtime( true );
    
    $Query = new SourceQuery( );
    
    $Info    = [];
    $Players = [];
    $Exception = null;
    
    try
    {
        $Query->Connect( $row['ip'], $row['qport'], 3, SourceQuery::SOURCE );
        //$Query->SetUseOldGetChallengeMethod( true ); // Use this when players/rules retrieval fails on games like Starbound
        
        $Info    = $Query->GetInfo( );
        $Players = $Query->GetPlayers( );
    }
    catch( Exception $e )
    {
        $Exception = $e;
    }
    finally
    {
        $Query->Disconnect( );
    }
    
    $Timer = number_format( microtime( true ) - $Timer, 4, '.', '' );
 
?>

<?php if( !empty( $Info ) ): ?>

      <tr>
      <?php if($i == 1) { ?>
        <tr class="table-warning">
      <?php }else{ ?>
       <tr>
      <?php } ?>
      <th scope="row">
        <?php echo $i; ?></th>
        <td><?php echo $Info['HostName'];  ?></td>
        <td><?php echo $row['ip']; ?>:<?php echo $row['port']; ?></td>
        <td><?php echo $Info['Players']; ?>/<?php echo $Info['MaxPlayers']; ?></td>
        <td>
<?php 
switch ($focus) {
  case "1":
    echo "Crafting";
    break;
  case "2":
    echo "Roleplay";
    break;
  case "3":
    echo "PVP";
    break;
  case "4":
    echo "PVE";
    break;
}
?>
|<?php 
switch ($type) {
  case "0":
    echo "Vanilla";
    break;
  case "1":
    echo "Modded";
    break;
}
?>
</td>
        <td>
        
         <a href="vote.php?id=<?php echo $row['id']; ?>">
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-success"><?php echo $row['votes']; ?></button>
 <button type="button" class="btn btn-success">Vote</button>
</div>
</a>
        
        </td>
      </tr>
        

<?php else: ?>
      <tr class="table-danger">
        <th scope="row"><?php echo $i; ?></th>
        <td><?php echo $row['servername'];  ?></td>
        <td><?php echo $row['ip']; ?>:<?php echo $row['port']; ?></td>
        <td><?php echo $row['maxplayers']; ?></td>
        <td>
        <?php 
switch ($focus) {
  case "1":
    echo "Crafting";
    break;
  case "2":
    echo "Roleplay";
    break;
  case "3":
    echo "PVP";
    break;
  case "4":
    echo "PVE";
    break;
}
?>
|<?php 
switch ($type) {
  case "0":
    echo "Vanilla";
    break;
  case "1":
    echo "Modded";
    break;
}
?>
        </td>
        <td class="table-danger">
        
         <a href="vote.php?id=<?php echo $row['id']; ?>">
<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-success"><?php echo $row['votes']; ?></button>
 <button type="button" class="btn btn-success">Vote</button>
</div>
</a>
        
        </td>
      </tr>

                    
<?php endif; ?>
                
<?php $i  ; } ?>    
    </tbody>

  </table>
  </div>
 <?php for ($page = 1; $page <= $total_pages ; $page  ):?>
        <a href='<?php echo "?page=$page"; ?>' class="links">
            <?php  echo $page; ?>
        </a>
    <?php endfor; ?>   
</div>  
</pre>

CodePudding user response：

You only load the first page via AJAX. The loaded page has pagination that links to next pages. These links are just regular link and you will have to bind your AJAX function to them.

function refreshData(page) {
    page = page || 1; // default page
    var display = document.getElementById("servers");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "query/Examples/serverlist.php?page="   page);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            display.innerHTML = this.responseText;
        } else {
            display.innerHTML = "Loading...";
        };
    }
}

and for the pagination links:

<?php for ($page = 1; $page <= $total_pages; $page  ):?>
    <a href='javascript:refreshData(<?php echo $page; ?>);' class="links">
        <?php  echo $page; ?>
    </a>
<?php endfor; ?>