I’m working on a pagination feature using List.js for my email page on a website where emails are loaded using PHP, MySQL, and AJAX. I have installed List.js locally and referenced it correctly in my footer. While the pagination works fine on other pages, it’s not functioning correctly on my emails page.
Here’s a brief overview of the setup:
Page Loading: When the user navigates to the email page, email.php loads. I’ve added a PHP condition to load email_inbox.php by default inside email.php unless the user selects another option (e.g., sent, draft, trash). In that case, email.php dynamically loads the selected content.
Issue Description: The problem is that when the page loads, the emails are displayed with pagination for a brief moment, and then all the emails appear without pagination.
NOTE: I have tested the email_inbox.php code in a separate file, and it loaded the emails with pagination correctly.
Here’s a simplified version of my code to illustrate the issue:
- email_inbox.php
<?php
if (empty($emails)) {
echo "<div class='text-center'>No emails found</div>";
} else { ?>
<div id='all-emails' data-list='{"valueNames":["email"],"page":5,"pagination":true}'>
<div class='list' id='emails-list'>
<?php
foreach ($emails as $email) {
$id = $email['id'];
$sender = $email['sender'];
$sender_name = $email['sender_name'];
$cc_recipient = $email['cc_recipient'];
$bcc_recipient = $email['bcc_recipient'];
$subject = $email['subject'];
$content = $email['content'];
$content = str_replace("xC2xA0", ' ', $content);
$is_read = $email['is_read'];
$is_starred = $email['is_starred'];
$is_archived = $email['is_archived'];
$is_deleted = $email['is_deleted'];
$is_draft = $email['is_draft'];
$is_interview = $email['is_interview'];
$is_application_received = $email['is_application_received'];
$is_not_accepted = $email['is_not_accepted'];
$is_job_ad = $email['is_job_ad'];
$is_skill_test = $email['is_skill_test'];
$timeZone = new DateTimeZone('Asia/Karachi');
$created_at = DateTime::createFromFormat('Y-m-d H:i:s', $email['created_at'], $timeZone);
$sent_at = $email['sent_at'];
$updated_at = $email['updated_at'];
$attachments = $email['attachments'];
// Calculate the time difference
$currentDate = new DateTime();
$timeDifference = $currentDate->diff($created_at);
// Determine the most appropriate unit
if ($timeDifference->days == 0) {
if ($timeDifference->h == 0) {
if ($timeDifference->i == 0) {
$timeAgo = $timeDifference->s . 's';
} else {
$timeAgo = $timeDifference->i . 'm';
}
} else {
$timeAgo = $timeDifference->h . 'h';
}
} else {
if ($timeDifference->y > 0) {
$timeAgo = $timeDifference->y . 'Y';
} elseif ($timeDifference->m > 0) {
$timeAgo = $timeDifference->m . 'M';
} else {
$timeAgo = $timeDifference->d . 'D';
}
}
?>
<div class="email border-top border-translucent hover-actions-trigger py-3 <?php echo $is_read == 0 ? 'bg-white' : ''; ?>" id="email-item" data-email-id="<?php echo $id; ?>" data-email-read="<?php echo $is_read; ?>">
<div class="row align-items-center gx-2">
<div class="col-auto">
<div class="d-flex flex-column flex-sm-row">
<button class="btn p-0 star-btn" data-email-id="<?php echo $id; ?>" data-email-folder="inbox" data-email-starred="<?php echo $is_starred; ?>">
<span class="<?php echo $is_starred ? "fas" : "far"; ?> text-body-quaternary fa-star"></span>
</button>
</div>
</div>
<div class="col-auto">
<a class="text-body-emphasis fw-bold inbox-link fs-9 email-items email-links" href="email.php?folder=details" data-folder="details" data-email-id="<?php echo $id; ?>" data-current-folder="inbox">
<?php
if (empty($sender_name)) {
echo $sender;
} else {
echo $sender_name;
}
?>
</a>
</div>
<div class="col-auto ms-auto">
<div class="hover-actions end-0">
<button class="btn btn-phoenix-secondary btn-icon dropdown-toggle dropdown-caret-none" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent">
<span class="fa-solid fa-ellipsis"></span>
</button>
<div class="dropdown-menu dropdown-menu-end py-2">
<?php if ($_SESSION['role'] === 'candidate') : ?>
<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#kanbanAddTask" href="javascript:void(0);">Mark Interview</a>
<?php endif; ?>
<a class="dropdown-item archive-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-archived="<?php echo $is_archived; ?>">Archive</a>
<a class="dropdown-item interview-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-interview="<?php echo $is_interview; ?>">Move to
Interviews</a>
<a class="dropdown-item application-received-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-application-received="<?php echo $is_application_received; ?>">Move to
Application Received</a>
<a class="dropdown-item not-accepted-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-not-accepted="<?php echo $is_not_accepted; ?>">Move to
Not Accepted</a>
<a class="dropdown-item job-ad-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-job-ad="<?php echo $is_job_ad; ?>">Move to
Job Ads</a>
<a class="dropdown-item skill-test-btn" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);" data-email-skill-test="<?php echo $is_skill_test; ?>">Move to
Skill Test Assessments</a>
<a class="dropdown-item text-danger" id="delete-email" data-email-deleted="<?php echo $is_deleted; ?>" data-email-folder="inbox" data-email-id="<?php echo $id; ?>" href="javascript:void(0);">Delete</a>
</div>
</div>
<span class="fs-10 fw-bold"><?php echo $timeAgo; ?></span>
</div>
</div>
<div class="ms-4 mt-sm-0">
<a class="d-block inbox-link email-items email-links" href="email.php?folder=details" data-folder="details" data-email-id="<?php echo $id; ?>" data-current-folder="inbox">
<span class="fs-9 line-clamp-1 text-body-emphasis"><?php echo $subject; ?></span>
<p class="fs-9 ps-0 text-body-tertiary mb-0 line-clamp-2">
<?php
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($content);
libxml_clear_errors();
removeElementsByTagName('script', $doc);
removeElementsByTagName('style', $doc);
removeElementsByTagName('link', $doc);
$textContent = strip_tags($doc->saveHTML());
$maxLength = 100;
if (strlen($textContent) > $maxLength) {
$plainContent = substr($textContent, 0, $maxLength) . '...';
}
echo $plainContent;
?>
</p>
</a>
<?php
if (!empty($attachments)) {
foreach ($attachments as $attachment) {
$filename = $attachment['file_name'] ?: $attachment['file_address'];
$fileExtension = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
$iconClass = getIconClass($fileExtension);
?>
<a class="d-inline-flex align-items-center border border-translucent rounded-pill px-3 py-1 me-2 mt-2 inbox-link" href="queries/download_attachments.query.php?file_url=<?php echo $attachment['file_address']; ?>" download>
<span class="<?php echo $iconClass; ?> fs-9"></span>
<span class="ms-2 fw-bold fs-10 text-body"><?php echo htmlspecialchars($filename); ?></span>
</a>
<?php
}
}
?>
</div>
</div>
<?php
} ?>
</div>
<div class="row align-items-center justify-content-between py-2 pe-0 fs-9">
<div class="col-auto d-flex">
<p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info">
</p>
<a class="fw-semibold" href="#!" data-list-view="*">
View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
</a>
<a class="fw-semibold d-none" href="#!" data-list-view="less">
View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
</a>
</div>
<div class="col-auto d-flex">
<button class="page-link" data-list-pagination="prev">
<span class="fas fa-chevron-left"></span>
</button>
<ul class="mb-0 pagination"></ul>
<button class="page-link pe-0" data-list-pagination="next">
<span class="fas fa-chevron-right"></span>
</button>
</div>
</div>
</div>
<?php
}
?>
- email.php
<div id="load-folder-emails">
<?php
if (isset($_GET['folder'])) {
$folder = $_GET['folder'];
if (isset($_GET['emailId'])) {
$emailId = $_GET['emailId'];
}
if (isset($_GET['currentFolder'])) {
$currentFolder = $_GET['currentFolder'];
}
} else {
$folder = 'inbox';
}
if ($folder == 'inbox') {
include_once 'email_inbox.php';
} else if ($folder == 'sent') {
include_once 'email_sent.php';
} else if ($folder == 'draft') {
include_once 'email_draft.php';
} else if ($folder == 'spam') {
include_once 'email_spam.php';
} else if ($folder == 'deleted') {
include_once 'email_deleted.php';
} else if ($folder == 'starred') {
include_once 'email_starred.php';
} else if ($folder == 'archived') {
include_once 'email_archived.php';
} else if ($folder == 'details') {
include_once 'email_details.php';
} else if ($folder == 'interviews') {
include_once 'email_interviews.php';
} else if ($folder == 'applicationReceived') {
include_once 'email_application_received.php';
} else if ($folder == 'notAccepted') {
include_once 'email_not_accepted.php';
} else if ($folder == 'jobAds') {
include_once 'email_job_ads.php';
} else if ($folder == 'skillTestAssessments') {
include_once 'email_skill_assessment.php';
}
?>
</div>