I am trying to have a pagination system for my practice webapp. In doing so, I stumbled upon
this.
Upon implementation in my own practice webapp, I noticed that line 3 which is
$limit = isset($_POST["limit-records"]) ? $_POST["limit-records"] : 2;
Does not accept the posted value from the select tag of the form to change the limit value of the query and directly goes into the "2" whenever I use the pagination links to change the page value. (I don't have a lot of data, so for testing I am using 2)
For example, by default I have the page set up right now to automatically limit queries by 2 only. If I select 3 to be the limit, it will limit the query by 3 in the first page. But if I use any of the pagination link, the limit will be 2 again instead of 3.
I need it to be so that whatever the user selects in the select option, it will automatically be the limit value even when I go to the next page.
What I have tried:
This is my current code as of now
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Augusta Webtech Solutions">
<meta name="description" content="Fundamentals of Database System" >
<meta name="keywords" content="CSS, IT201">
<title>Augusta Webtech Solutions</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/styles.css">
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
font-family:Century Gothic;
color: white;
background-color: cadetblue;
}
</style>
</head>
<?php
$conn = new mysqli('localhost','root', '', 'smartmab');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$limit = isset($_POST["limit-records"]) ? $_POST["limit-records"] : 2;
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$start = ($page - 1) * $limit;
$sql = "SELECT * from client_info LIMIT $start, $limit;";
$result = mysqli_query($conn, $sql);
$result1 = $conn->query("SELECT count(client_id) AS id FROM client_info");
$queryCount = $result1->fetch_all(MYSQLI_ASSOC);
$total = $queryCount[0]['id'];
$pages = ceil($total/$limit);
$Previous = $page - 1;
$Next = $page + 1;
?>
<body style="text-align:center;">
<div>
<header style="text-align:center;">
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon">class="fas fa-bars"></label>
<div class="content">
<ul class="links">
<li><a href="../index.html">Home</a></li>
<li><a href="viewRecords.php">View Client Records</a></li>
<li><a href="viewAgent.php">View Agent Records</a></li>
<li><a href="viewLoan.php">View Loan Records</a></li>
<li><a href="viewTransac.php">General Ledger</a></li>
<li>
<a href="#" class="desktop-link">others</a>
<input type="checkbox" id="show-features">
<label for="show-features">Features</label>
<ul>
<li><a href="#">Drop Menu 1</a></li>
<li><a href="#">Drop Menu 2</a></li>
<li><a href="#">Drop Menu 3</a></li>
<li><a href="#">Drop Menu 4</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<br>
<br>
<br>
<br>
<h1 style="font-size: 50px;" class="container">^__b>Smart Mab Lending Corp</h1>
<hr>
</header>
<h3>Client Records</h3>
<br>
<!-- Start of pagination
Change the href of links -->
<div class= "row">
<div class="col-md-10">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item <?php echo $page == 1 ? 'disabled' : ''; ?>">
<a class="page-link" href="viewRecords.php?page=<?= $Previous;?>" aria-label="Previous">
<span aria-hidden="true">« Previous</span>
</a>
</li>
<?php for($i = 1; $i<= $pages; $i++) : ?>
<li class="page-item ">
<a class="page-link" href="viewRecords.php?page=<?= $i;?>"><?= $i; ?></a>
</li>
<?php endfor; ?>
<li class="page-item <?php echo $page == $pages ? 'disabled' : ''; ?>">
<a class="page-link" href="viewRecords.php?page=<?= $Next;?>" aria-label="Next">
<span aria-hidden="true">Next »</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="text-center" style="margin-top: 20px; " class="col-md-2">
<form id="pagination-select" method="post" action="viewRecords.php">
<!-- insert data to needed to be passed in the page using hidden input -->
<select name="limit-records" id="limit-records">
<option disabled="disabled" selected="selected">---Limit Records---</option>
<?php foreach([2,3,10,25,100,500,1000,5000] as $limit): ?>
<option <?php if( isset($_POST["limit-records"]) && $_POST["limit-records"] == $limit) echo "selected" ?> value="<?= $limit; ?>"><?= $limit; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
</div>
<table class="table table-striped table-hover" style="background-color: AliceBlue">
<tr style="background-color:#000000; color:white; font-weight: bold">
<th>Name</th>
<th>Client Address</th>
<th>Client Num</th>
<th>Modify</th>
<th>View Loan Record</th>
<th>View Transaction Record</th>
</tr>
<?php
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)) {
echo '<tr><td>' .$row["client_name"]. '</td><td>' .$row["client_address"]. '</td><td>' .$row["client_num"]. '</td><td>
<form id= "modifytable" action="../php/clientTable/modifyClient.php" method="post">
<button id= "modify" name= "modify" value= "'.$row['client_id'].'">
Modify
</button>
</form>
</td>
<td>
<form id= "viewloan" action="../php/clientTable/viewClientLoan.php" method="post">
<button id= "loan" name= "loan" value= "'.$row['client_id'].'">
View Loan Record
</button>
</form>
</td>
<td>
<form id= "viewtransaction" action="../php/clientTable/viewClientTransac.php" method="post">
<button id= "transac" name= "transac" value= "'.$row['client_id'].'">
View Transaction Record
</button>
</form>
</td>
</tr>';
}
echo "</table>";
} else { echo "0 results"; echo "number of rows: " . $result->num_rows; }
?>
<button class="btn btn-dark" onclick="history.back()">Go Back</button>
</div>
<!-- Jquery then close connection below -->
<script type="application/javascript">
$(document).ready(function(){
$("#limit-records").change(function(){
$('#pagination-select').submit();
})
})
</script>
<?php $conn->close(); ?>
</body>
</html>