Level 58
To paginate the values, you can use a combination of JavaScript and PHP. Here's an example of how you can do it:
- First, you need to modify your PHP code to accept a page number and a limit. You can use the
array_slicefunction to get a subset of the array based on the page number and limit. Here's an example:
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$limit = 7;
$offset = ($page - 1) * $limit;
$bonuses = $values->bonuses;
$bonuses = array_slice($bonuses, $offset, $limit);
- Next, you need to modify your HTML code to display the paginated values. You can use a loop to iterate over the
$bonusesarray and display the values. Here's an example:
<div class="table-list">
<?php foreach ($bonuses as $key => $value): ?>
<div class="row list-item">
<div class="col-4">
<h4 class="mb-0 font-d-bld text-white"><?php echo $key + 1; ?>) <?php echo $value->name; ?></h4>
</div>
<div class="col-2">
<h4 class="mb-0 font-d-bld text-white"><?php echo $value->bet_size; ?></h4>
</div>
<div class="col-3">
<h4 class="mb-0 font-d-bld text-white"><?php echo $value->multiplier; ?></h4>
</div>
<div class="col-3">
<h4 class="mb-0 font-d-bld text-white"><?php echo $value->payout; ?></h4>
</div>
</div>
<?php endforeach; ?>
</div>
- Finally, you need to add pagination links to allow the user to navigate between pages. You can use JavaScript to handle the pagination links. Here's an example:
<div class="table-pagination-btn d-flex justify-content-between">
<div class="left-btn">
<a href="#" class="prev-page"><i class="fa-solid fa-angle-left"></i></a>
</div>
<div class="pagination-number">
<ul class="ps-0 mb-0 d-flex">
<?php for ($i = 1; $i <= ceil(count($values->bonuses) / $limit); $i++): ?>
<li><a href="#" class="page-link <?php echo $i == $page ? 'active' : ''; ?>"><?php echo $i; ?></a></li>
<?php endfor; ?>
</ul>
</div>
<div class="right-btn">
<a href="#" class="next-page"><i class="fa-solid fa-angle-right"></i></a>
</div>
</div>
<script>
$(function() {
$('.page-link').on('click', function(e) {
e.preventDefault();
var page = $(this).text();
window.location.href = '?page=' + page;
});
$('.prev-page').on('click', function(e) {
e.preventDefault();
var page = <?php echo $page - 1; ?>;
window.location.href = '?page=' + page;
});
$('.next-page').on('click', function(e) {
e.preventDefault();
var page = <?php echo $page + 1; ?>;
window.location.href = '?page=' + page;
});
});
</script>
This code adds pagination links to the page and uses JavaScript to handle the clicks. When a user clicks on a page link, the page number is added to the URL and the page is reloaded with the new page number. When a user clicks on the previous or next button, the page number is incremented or decremented and the page is reloaded with the new page number.