95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
let currentPage = 1;
|
|
const itemsPerPage = 10;
|
|
let searchExhausted = false;
|
|
|
|
function previousPage() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
fetchData();
|
|
}
|
|
}
|
|
|
|
function nextPage() {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
fetchData();
|
|
}
|
|
}
|
|
|
|
function updatePagination(data) {
|
|
currentPage = data.current_page;
|
|
totalPages = data.last_page;
|
|
totalItems = data.total;
|
|
let paginationHTML = '';
|
|
|
|
paginationHTML += `<li><a href="#" onclick="previousPage()" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg ${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''}">Previous</a></li>`;
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
paginationHTML += `<li><a href="#" onclick="changePage(${i})" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 ${currentPage === i ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : ''}">${i}</a></li>`;
|
|
}
|
|
|
|
paginationHTML += `<li><a href="#" onclick="nextPage()" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg ${currentPage === totalPages ? 'cursor-not-allowed opacity-50' : ''}">Next</a></li>`;
|
|
|
|
$('#pagination').html(paginationHTML);
|
|
updatePaginationInfo();
|
|
}
|
|
|
|
function updatePaginationInfo() {
|
|
$('#pagination-info').html(`Showing <span class="font-semibold text-gray-900">${(currentPage - 1) * itemsPerPage + 1}-${Math.min(currentPage * itemsPerPage, totalItems)}</span> of <span class="font-semibold text-gray-900">${totalItems}</span>`);
|
|
}
|
|
|
|
function changePage(page) {
|
|
if (page !== currentPage) {
|
|
currentPage = page;
|
|
fetchData();
|
|
}
|
|
}
|
|
|
|
function toggleModal() {
|
|
var modal = document.getElementById("modal");
|
|
modal.classList.toggle("hidden");
|
|
}
|
|
|
|
function closeModal() {
|
|
var modal = $("#modal");
|
|
var form = $("#formData");
|
|
modal.addClass("hidden");
|
|
|
|
var formElements = form.find(":input");
|
|
formElements.each(function() {
|
|
var element = $(this);
|
|
if (element.is("input") || element.is("select") || element.is("textarea")) {
|
|
element.val("");
|
|
if (element.attr("type") === "password") {
|
|
element.prop("disabled", false);
|
|
element.removeClass('bg-gray-300');
|
|
element.addClass('bg-gray-50');
|
|
}
|
|
} else if ((element.is("input")) && (element.attr("type") === "checkbox" || element.attr("type") === "radio")) {
|
|
element.prop("checked", false);
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById("openModalButton").addEventListener("click", toggleModal);
|
|
document.getElementById("closeModalButton").addEventListener("click", closeModal);
|
|
window.addEventListener("click", function(event) {
|
|
var modal = document.getElementById("modal");
|
|
if (event.target == modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('search').addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const tableRows = document.querySelectorAll('#table tbody tr');
|
|
|
|
tableRows.forEach(row => {
|
|
const nama = row.cells[1].textContent.toLowerCase();
|
|
if (nama.includes(searchTerm)) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}); |