if (meta && (meta['total'] >= 40)) {
pagination += (`<nav class="navigation mt-5">
<div>
<span class="pagination-detail">${ meta.to } dari ${ meta.total } siswa</span>
</div>
<ul class="pagination">
<li class="page-item ${ (currentPage ?? 1) - 1 <= 0 ? 'disabled' : '' }">
<a class="page-link" onclick="(getStudents('${grade}','${status}','${ 1 }'))" tabindex="-1"><</a>
</li>
`)
if (meta.last_page <= 5) {
page_first = 1;
page_last = meta.last_page;
} else {
if (currentPage <= 3) {
page_first = 1;
page_last = 5;
} else if (currentPage >= meta.last_page - 2) {
page_first = meta.last_page - 4;
page_last = meta.last_page;
} else {
page_first = currentPage - 2;
page_last = currentPage + 2;
}
page_final = meta.last_page;
}
for (page_first; page_first <= page_last; page_first++) {
if (page_first == currentPage) {
pagination += (`
<li class="page-item active">
<a class="page-link" onclick="(getStudents('${grade}','${status}','${ page_first }'))">${ page_first }</a>
</li>`)
} else {
pagination += (`
<li class="page-item">
<a class="page-link" onclick="(getStudents('${grade}','${status}','${ page_first }'))">${ page_first }</a>
</li>`)
}
}
pagination += (`
<li class="page-item ${((currentPage ?? 1) + 1) > meta.last_page ? 'disabled' : '' }">
<a class="page-link" onclick="(getStudents('${grade}','${status}','${ meta.last_page }'))">></a>
</li>
</ul>
</nav>
`)
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter