관리-도구
편집 파일: course-page.js
"use strict"; /** variables */ const placeholder = $(".preloader-two"); var filters = {}; function fetchCourseData(page = 1, filters = {}) { var filterParams = new URLSearchParams(); for (var key in filters) { filterParams.append(key, filters[key]); } $.ajax({ url: base_url + "/fetch-courses?page=" + page + "&" + filterParams.toString(), beforeSend: function () { placeholder.removeClass("d-none"); scrollToElement(".top-baseline"); }, success: function (data) { $(".course-holder").html(data.items); $(".sub-category-holder").html(data.sidebar_items); if (data.itemCount != 0) { updatePaginationLinks(page, data.lastPage); } $(".course-count").text(data.itemCount); placeholder.addClass("d-none"); if (data.itemCount == 0) { $(".pagination-wrap").addClass("d-none"); } else { $(".pagination-wrap").removeClass("d-none"); } }, error: function (xhr, status, error) { placeholder.addClass("d-none"); toastr.error("Something went wrong! please reload the page"); }, }); // Update browser history var state = { page: page, filters: filters }; if (filterParams.toString().length > 0) { var url = window.location.pathname + '?' + filterParams.toString(); } else { var url = window.location.pathname; } history.pushState(state, null, url); } $(document).on("click", ".pagination a", function (event) { event.preventDefault(); var page = $(this).attr("href").split("page=")[1]; // filters.page = page; // Fetch data with the updated filters fetchCourseData(page, filters); }); function updatePaginationLinks(currentPage, lastPage) { var paginationHtml = '<ul class="pagination">'; var maxPagesToShow = 8; var startPage = Math.max(currentPage - maxPagesToShow, 1); var endPage = Math.min(currentPage + maxPagesToShow, lastPage); // Get current URL parameters var urlParams = new URLSearchParams(window.location.search); // Previous link if (currentPage > 1) { urlParams.set('page', currentPage - 1); paginationHtml += '<li class="page-item"><a class="page-link" href="?' + urlParams.toString() + '"><i class="fas fa-chevron-left"></i></a></li>'; } else { paginationHtml += '<li class="page-item disabled"><span><i class="fas fa-chevron-left"></i></span></li>'; } // First and dots if needed if (startPage > 1) { urlParams.set('page', 1); paginationHtml += '<li class="page-item"><a class="page-link" href="?' + urlParams.toString() + '">1</a></li>'; if (startPage > 2) { paginationHtml += '<li class="disabled page-dots"><span>...</span></li>'; } } // Page links for (var i = startPage; i <= endPage; i++) { urlParams.set('page', i); paginationHtml += '<li class="page-item' + (i == currentPage ? ' active' : '') + '"><a class="page-link" href="?' + urlParams.toString() + '">' + i + '</a></li>'; } // Last and dots if needed if (endPage < lastPage) { if (endPage < lastPage - 1) { paginationHtml += '<li class="disabled"><span>...</span></li>'; } urlParams.set('page', lastPage); paginationHtml += '<li class="page-item"><a class="page-link" href="?' + urlParams.toString() + '">' + lastPage + '</a></li>'; } // Next link if (currentPage < lastPage) { urlParams.set('page', currentPage + 1); paginationHtml += '<li class="page-item"><a class="page-link" href="?' + urlParams.toString() + '"><i class="fas fa-chevron-right"></i></a></li>'; } else { paginationHtml += '<li class="page-item disabled"><span><i class="fas fa-chevron-right"></i></span></li>'; } paginationHtml += "</ul>"; $(".pagination").html(paginationHtml); } // Filters $(".main-category-checkbox").on("change", function () { var mainCategory = $(this).val() filters.main_category = mainCategory; // filters.page = 1; filters.category = ''; fetchCourseData(1, filters); }); $(document).on("change", ".category-checkbox", function () { var selectedCategories = []; $(".category-checkbox:checked").each(function () { selectedCategories.push($(this).val()); }); filters.category = selectedCategories.join(","); fetchCourseData(1, filters); }); $(".language-checkbox").on("change", function () { var selectedLanguages = []; $(".language-checkbox:checked").each(function () { selectedLanguages.push($(this).val()); }); filters.language = selectedLanguages.join(","); fetchCourseData(1, filters); }); $(".price-checkbox").on("change", function () { var selectedPrice = []; $(".price-checkbox:checked").each(function () { selectedPrice.push($(this).val()); }); filters.price = selectedPrice.join(","); fetchCourseData(1, filters); }); $(".level-checkbox").on("change", function () { var selectedLevel = []; $(".level-checkbox:checked").each(function () { selectedLevel.push($(this).val()); }); filters.level = selectedLevel.join(","); fetchCourseData(1, filters); }); $(".rating-checkbox").on("change", function () { var selectedRating = []; $(".rating-checkbox:checked").each(function () { selectedRating.push($(this).val()); }); filters.rating = selectedRating.join(","); fetchCourseData(1, filters); }); $(".orderby").on("change", function () { var order = $(this).val() filters.order = order; fetchCourseData(1, filters); }); // On Document Load $(document).ready(function () { // Extract page number and filters from URL var urlParams = new URLSearchParams(window.location.search); var page = urlParams.get("page") || 1; var search = urlParams.get("search"); var category = urlParams.get("category"); var main_category = urlParams.get("main_category"); var language = urlParams.get("language"); var price = urlParams.get("price"); var level = urlParams.get("level"); var rating = urlParams.get("rating"); // Initialize filters object if (search) { filters.search = search; } if (category) { filters.category = category.split(','); $(".category-checkbox").each(function () { if (filters.category.includes($(this).val())) { $(this).prop('checked', true); } }); } if (main_category) { filters.main_category = main_category; $(".main-category-checkbox").each(function () { if (filters.main_category.includes($(this).val())) { $(this).prop('checked', true); } }); } if (language) { filters.language = language.split(','); $(".language-checkbox").each(function () { if (filters.language.includes($(this).val())) { $(this).prop('checked', true); } }); } if (price) { filters.price = price.split(','); $(".price-checkbox").each(function () { if (filters.price.includes($(this).val())) { $(this).prop('checked', true); } }); } if (level) { filters.level = level.split(','); $(".level-checkbox").each(function () { if (filters.level.includes($(this).val())) { $(this).prop('checked', true); } }); } if (rating) { filters.rating = rating.split(','); $(".rating-checkbox").each(function () { if (filters.rating.includes($(this).val())) { $(this).prop('checked', true); } }); } // Fetch data on page load fetchCourseData(page, filters); });