How can I add pagination to my existing code? - php

Question

I would like to add pagination to my existing table which I have programmed using ajax.
I have tried multiple pagination solutions and none of them looks like its compatible with my existing table which I have right now
Table in index.php
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<th width="5%"></th>
<th width="10%">Serial No.</th>
<th width="20%">Equipment Type</th>
<th width="15%">Document Remarks</th>
<th width="10%">Supplier</th>
<th width="10%">Date In</th>
<th width="10%">Customer</th>
<th width="10%">Date Out</th>
</thead>
<tbody></tbody>
</table>
</div>
Script for showing table in index.php
<script>
$(document).ready(function () {
function fetch_data()
{
$.ajax({
url: "select.php",
method: "POST",
dataType: "json",
success: function (data)
{
var html = '';
for (var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td><input type="checkbox" value="' +
data[count].id + '" id="' + data[count].id + '" data-serial_number="' +
data[count].serial_number + '" data-equipment_type="' +
data[count].equipment_type + '" data-document_remarks="' +
data[count].document_remarks + '" data-supplier="' + data[count].supplier +
'" data-date_scan="' + data[count].date_scan + '" data-customer="' +
data[count].customer + '" data-date_out="' + data[count].date_out + '"
class="check_box" /></td>';
html += '<td>' + data[count].serial_number + '</td>';
html += '<td>' + data[count].equipment_type + '</td>';
html += '<td>' + data[count].document_remarks + '</td>';
html += '<td>' + data[count].supplier + '</td>';
html += '<td>' + data[count].date_scan + '</td>';
html += '<td>' + data[count].customer + '</td>';
html += '<td>' + data[count].date_out + '</td></tr>';
}
$('tbody').html(html);
}
});
}
fetch_data();
}
</script>
select.php
include('database_connection.php');
$query = "SELECT * FROM inventory ORDER BY id DESC";
$statement = $connect->prepare($query);
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
echo json_encode($data);
}
?>

Answer 1

In your fetch_data() function you will need to include page data in your POST request:
limit should be the number of items viewable per page
offset should be limit multiplied by the page number (starting at 0)
Ex. below would request the second page of results (10 results per page)
$.ajax({
url: "select.php",
method: "POST",
dataType: "json",
data: {limit: 10, offset: 10},
// etc.
The in your PHP script you will need to read these variables and add them to your query:
$limit = $_POST['limit'];
$offset= $_POST['offset'];
$query = "SELECT * FROM inventory ORDER BY id DESC LIMIT = ? OFFSET= ?";
$statement = $connect->prepare($query);
if ($statement->execute([$limit, $offset])) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
echo json_encode($data);
}