My problem is that it does add the amount properly as it does at the moment 1-50 and then it goes 11-70 when it is supposed to be 51 to 100 and it does not add the math correctly
front end
<html>
<head>
<title>Credit Sale</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select name="page" id="page">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<br>
<button name="btn" type="submit" class = "go" value="1" >1</button>
<button name="btn" type="submit" class = "go" value="2" >2</button>
<button name="btn" type="submit" class = "go" value="3" >3</button>
<button name="btn" type="submit" class = "go" value="4" >4</button>
<button name="btn" type="submit" class = "go" value="5" >5</button>
<button name="btn" type="submit" class = "go" value="6" >6</button>
<button name="btn" type="submit" class = "go" value="7" >7</button>
<button name="btn" type="submit" class = "go" value="8" >8</button>
<button name="btn" type="submit" class = "go" value="9" >9</button>
<button name="btn" type="submit" class = "go" value="10" >10</button>
<div id="test">
</div>
<div id="test">
</div>
</body>
<!--CSS-->
<style>
.grid-container {
display: grid;
margin-left: 5rem;
margin-right: 5rem;
margin-top: 2rem;
margin-bottom: 5rem;
padding-bottom: 10px;
grid-template-columns: repeat(5, 15%);
grid-gap: 1.5rem;
padding-top: 15px;
padding-left: 15px;
max-width: 70%;
max-height: 70%;
}
.grid-container>div {
background-color: rgb(208 207 207 / 80%);
text-align: center;
font-size: 14px;
}
.grid-container>div img {
max-width: 30%;
height: auto;
margin-bottom: 5px;
background-color: gray;
}
</style>
<script>
$(".go").click(function () {
var pageValue = page.value;
var buttonValue = this.value;
console.log(pageValue);
console.log(buttonValue);
$('#test').html('');
$.ajax('api.php', {
type: 'POST',
data: { call: 'employeePage', page: pageValue, button: buttonValue},
success: function (data, status, xhr) {
$("#test").html(data);
},
error: function (jqXhr, textStatus, errorMessage) {
$("#test").html('Error' + errorMessage);
}
});
});
</script>
</html>
back end
<?php
if (isset($_POST["call"])) {
if ($_POST["call"] == "employeePage") {
try {
//validate button
if (!isset($_POST["page"]) || empty(trim($_POST["page"])) && $_POST["page"] != 0 && $_POST["button"] != 0) {
throw new Exception("Please enter a valid page");
}
$pageNum = $_POST["page"];
$buttonNum = $_POST["button"];
if ($pageNum != 0){
$pageNum = $pageNum * 1;
}
if ($buttonNum != 1){
$buttonNum = ($buttonNum * 10)-10;
} else if ($buttonNum == 1){
$buttonNum = 0;
}
$db = new mysqli("localhost", "root", "", "test") or die("Connect failed: %s\n" . $db->error);
$result = $db->query("SELECT *FROM employee ORDER BY id asc LIMIT $buttonNum,$pageNum");
$display = "<div class='grid-container'";
$display2 = "<div>";
if (!empty($result)) {
while ($row = $result->fetch_assoc()) {
$display2 .= "
<div class='grid-item'>
<img src = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_640.png' />
<p>" . $row['ID'] . "</p>
<p>" . $row['LastName'] . "</p>
<p>" . $row['FirstName'] . "</p>
<p>" . $row['Wage'] . "</p>
<p>" . $row['Post'] . "</p>
</div>";
}
$display2 .= "</div>";
$display .= $display2 ."</div>";
} else {
throw new Exception("NO Data Found");
}
echo $display;
} catch (Exception $e) {
echo "Note: " . $e->getMessage();
}
}
}
?>
I have tried changing the offset variable but it does not seem to work i have also tried looking up how to solve this error
