add notification paging

This commit is contained in:
johnnyq 2025-05-07 19:23:11 -04:00
parent 2ffb2be083
commit fc344ef636
1 changed files with 74 additions and 28 deletions

View File

@ -24,40 +24,49 @@ ob_start();
</div>
<div class="modal-body bg-white">
<table class="table table-sm table-hover table-borderless">
<?php if ($num_notifications) { ?>
<?php while ($row = mysqli_fetch_array($sql)) {
<?php while ($row = mysqli_fetch_array($sql)) {
$notification_id = intval($row["notification_id"]);
$notification_type = nullable_htmlentities($row["notification_type"]);
$notification_details = nullable_htmlentities($row["notification"]);
$notification_action = nullable_htmlentities(
$row["notification_action"]
);
$notification_timestamp_formated = date(
"M d g:ia",
strtotime($row["notification_timestamp"])
);
$notification_client_id = intval($row["notification_client_id"]);
if (empty($notification_action)) {
$notification_action = "#";
$notification_id = intval($row["notification_id"]);
$notification_type = nullable_htmlentities($row["notification_type"]);
$notification_details = nullable_htmlentities($row["notification"]);
$notification_action = nullable_htmlentities(
$row["notification_action"]
);
$notification_timestamp_formated = date(
"M d g:ia",
strtotime($row["notification_timestamp"])
);
$notification_client_id = intval($row["notification_client_id"]);
if (empty($notification_action)) {
$notification_action = "#";
}
?>
<tr class="notification-item">
<th>
<a class="text-dark" href="<?php echo $notification_action; ?>">
<i class="fas fa-bullhorn mr-2"></i><?php echo $notification_type; ?>
<small class="text-muted float-right">
<?php echo $notification_timestamp_formated; ?>
</small>
<br>
<small class="text-secondary text-wrap"><?php echo $notification_details; ?></small>
</a>
</th>
</tr>
<?php
}
?>
<a class="text-dark dropdown-item px-1" href="<?php echo $notification_action; ?>">
<div>
<span class="text-bold">
<i class="fas fa-bullhorn mr-2"></i><?php echo $notification_type; ?>
</span>
<small class="text-muted float-right">
<?php echo $notification_timestamp_formated; ?>
</small>
</table>
<div class="text-center mt-2">
<button id="prev-btn" class="btn btn-sm btn-outline-secondary mr-2"><i class="fas fa-caret-left"></i></button>
<button id="next-btn" class="btn btn-sm btn-outline-secondary"><i class="fas fa-caret-right"></i></button>
</div>
<small class="text-secondary text-wrap"><?php echo $notification_details; ?></small>
</a>
<?php
}} else { ?>
<?php } else { ?>
<div class="text-center text-secondary py-5">
<i class='far fa-6x fa-bell-slash'></i>
<h3 class="mt-3">No Notifications</h3>
@ -85,4 +94,41 @@ ob_start();
</button>
</div>
<script>
$(document).ready(function () {
var perPage = 5;
var $items = $(".notification-item");
var totalItems = $items.length;
var totalPages = Math.ceil(totalItems / perPage);
var currentPage = 0;
function showPage(page) {
$items.hide().slice(page * perPage, (page + 1) * perPage).show();
$("#prev-btn").prop("disabled", page === 0);
$("#next-btn").prop("disabled", page >= totalPages - 1);
$("#page-indicator").text(`Page ${page + 1} of ${totalPages} (${totalItems} total)`);
}
$("#prev-btn").on("click", function () {
if (currentPage > 0) {
currentPage--;
showPage(currentPage);
}
});
$("#next-btn").on("click", function () {
if (currentPage < totalPages - 1) {
currentPage++;
showPage(currentPage);
}
});
if (totalItems <= perPage) {
$("#prev-btn, #next-btn, #page-indicator").hide();
}
showPage(currentPage);
});
</script>
<?php require_once "../includes/ajax_footer.php";