Form is not updating the amount of rows for a dynamic html table

Question

I have a dashboard php page with a dynamic table of records from mysql database, paginated into pages of 1000 each. I added a select dropdown with some options for the user to update the amount of rows displayed. The select has JavaScript code to automatically submit the form onchange.

Form Page:

<?php

 include('connect.php');

 // first check URL
 if (isset($_GET['amount'])) {
 $perpage = $_GET['amount'];
 }
 // Now check form
 if (isset($_POST['amount'])) {
 $perpage = $_POST['amount'];
 }
 // if nothing set, default:
 if(!isset($perpage)) {
 $perpage = 50;
 }


 if(isset($_GET['page']) && !empty($_GET['page'])){ // code to get the amount of records for HTML paginated pages
     $currentPage = $_GET['page'];
 } else {
     $currentPage = 1;
 }

 // Pagination code and query
 $startFrom = ($currentPage * $perpage) - $perpage;
 $totalEmpSQL = "SELECT * FROM `tblusers` WHERE Id NOT IN (1,2,3)";
 $allEmpResult = mysqli_query($conn, $totalEmpSQL);
 $totalEmployee = mysqli_num_rows($allEmpResult);
 $lastPage = ceil($totalEmployee/$perpage);
 $firstPage = 1;
 $nextPage = $currentPage + 1;
 $previousPage = $currentPage - 1;
 $empSQL = "SELECT Id, FirstName, LastName, Cell, Email, Address, Region
            FROM `tblusers` 
            WHERE Id NOT IN (1,2,3) 
            ORDER BY LastName 
            LIMIT $startFrom, $perpage";
 $empResult = mysqli_query($conn, $empSQL);

 ?>

 <!-- HTML Form -->
 <section class="panel">
 <header class="panel-heading">
             <div class="input-group">
<!-- JavaScript Filter Input -->
<input type="text" class="form-control"  id="search" onkeyup="myFunction()" 
placeholder="Soek lede..">
<div class="input-group-btn">
  <button class="btn btn-default" type="submit">
    <i class="glyphicon glyphicon-search"></i>
  </button>
</div>
</div>
</header>
    <div class="panel-body">

<div class="row datatables-header form-inline">

                            <div class="col-sm-4 col-md-4">

                            <!-- THE FORM THAT IS SUPPOSED TO UPDATE THE 
VARIABLE FOR AMOUNT QUERY -->
                            <form method="post" action="<?php echo 
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                <select id="amount" class="form-control" 
onchange="this.form.submit()">
                                         <option value="10">10</option>
                                         <option value="25">25</option>
                                         <option value="50">50</option>
                                         <option value="100">100</option>
                                         <option value="500">500</option>
                                    </select>
                           </form>
                            </div>
    <div class="col-sm-4 col-md-4">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <?php if($currentPage != $firstPage) { ?>
                        <li class="page-item">
                            <a class="page-link" href="?page=<?php echo 
$firstPage ?>" tabindex="-1" aria-label="Vorige">
                                <span aria-hidden="true">Eerste</span>
                            </a>
                        </li>
                <?php } ?>
                <?php if($currentPage >= 2) { ?>
                        <li class="page-item"><a class="page-link" href="? 
 page=<?php echo $previousPage ?>"><?php echo $previousPage ?></a></li>
                <?php } ?>
                        <li class="page-item active"><a class="page-link" 
  href="?page=<?php echo $currentPage ?>"><?php echo $currentPage ?></a> 
 </li>
                            <?php if($currentPage != $lastPage) { ?>
                        <li class="page-item"><a class="page-link" href="?page=<?= $nextPage ?>&amount=<?= $perpage ?>"><?= $nextPage ?></a></li>
                        <li class="page-item">
                            <a class="page-link" href="?page=<?php echo 
  $lastPage ?>" aria-label="Volgende">
                                <span aria-hidden="true">Laaste</span>
                            </a>
                        </li>
                <?php } ?>
            </ul>
        </nav>
    </div>
    <div class="col-sm-4 col-md-4">
            <a class="btn btn-primary pull-right" style="margin:20px;" 
href="index.php?page=new">Laai nuwe lid</a>
    </div>
</div>
        <!-- THE DYNAMIC TABLE -->
        <div class="table-responsive">
            <table id="myTable" class="table table-hover table-striped 
    table-condensed mb-none">
                <?php
                    echo "<thead><th>Van:</th><th>Naam:</th><th>Selfoon: 
   </th><th>E-pos:</th><th>Adres:</th><th>Streek:</th><th>Aksie:</th> 
 </thead> 
   <tbody>";
                            while($emp = mysqli_fetch_assoc($empResult)){
                    ?>
                            <tr>
                                <?php echo "<tr><td>". $emp["LastName"] . " 
</td><td>". $emp["FirstName"] . "</td><td>". $emp["Cell"] . "</td><td>". 
 $emp["Email"] . "</td><td>". $emp["Address"] . "</td><td>". $emp["Region"] 
. 
"</td><td class='actions'><a href='index.php?page=edit&id=" . $emp["Id"] . 
"'><i class='fa fa-pencil'> Wysig | </i></a><a href='index.php? 
page=delete&id=" . $emp["Id"] . "'<i class='delete-row'><i class='fa fa- 
trash-o'> Verwyder | </i></a><a href='index.php?page=single&id=" . 
 $emp["Id"] 
 . "'<i class='delete-row'><i class='fa fa-comment-o'> SMS</i></a></td> 
</tr>";?>
                            </tr>
                        <?php } ?>
                    </tbody>
            </table>
        </div>
    </div>
</section>
<!-- dash panel end -->




<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
         tr[i].style.display = "";
       } else {
         tr[i].style.display = "none";
       }
    } 
  }
}
</script>

The page should load with the default amount of 1000 rows per page for the table, and then update when the select is changed to say 100, load only 100 records. It is currently displaying no records at all but when I remove the select it loads the default. My guess is, my code to handle the amount is not correct?

Answer 1

Try assigning as a default like this:

$perpage = isset($_GET['amount']) ? $_GET['amount'] : 1000;

Currently you set it based on the GET value first, but then overwrite it in the next line. This way checks it's in the URL, and if not goes with your default.

Then add that amount to your paging links. For instance, change:

<li class="page-item"><a class="page-link" href="? 
 page=<?php echo $nextPage ?>"><?php echo $nextPage ?></a></li>

to

<li class="page-item"><a class="page-link" href="? 
 page=<?= $nextPage ?>&amount=<?= $perpage ?>"><?= $nextPage ?></a></li>

Also, your form is POST , yet the select has no name, so no value is posted. Plus, you check for $_GET . So we need to tweak the select first:

 <select id="amount" name="amount" class="form-control" 
onchange="this.form.submit()">

However, this now means you need to check POST for the select yet GET for the paging links. So we now need to check which:

// first check URL
if (isset($_GET['amount'])) {
    $perpage = $_GET['amount'];
}
// Now check form
if (isset($_POST['amount'])) {
    $perpage = $_POST['amount'];
}
// if nothing set, default:
if(!isset($perpage)) {
    $perpage = 1000;
}

Answer 2

The problem was caused by a data tables plugin that came with Bootstrap. All I needed to do was add the class dataTable to the table and everything worked.