diff --git a/assets/script.js b/assets/script.js index 3bef98d..112392b 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,5 +1,5 @@ jQuery(document).ready(function ($) { - function triggerFiltering() { + function triggerFiltering(paged = 1) { let searchTerm = $('#search').val(); let selectedTypes = $('input[name="resource_type[]"]:checked') @@ -16,6 +16,7 @@ jQuery(document).ready(function ($) { let appliedFilters = []; + // Search Term if (searchTerm) { appliedFilters.push( ` @@ -25,27 +26,25 @@ jQuery(document).ready(function ($) { ); } - if (selectedTypes.length > 0) { + // Resource Types + selectedTypes.forEach(function (type) { appliedFilters.push( - ` - Type: ${selectedTypes.join(', ')} - + ` + Type: ${type} + ` ); - } + }); - if (selectedSubjects.length > 0) { + // Resource Subjects + selectedSubjects.forEach(function (subject) { appliedFilters.push( - ` - Subject: ${selectedSubjects.join(', ')} - + ` + Subject: ${subject} + ` ); - } + }); $('#applied-filters').html( appliedFilters.length ? appliedFilters.join(' ') : 'None' @@ -66,6 +65,7 @@ jQuery(document).ready(function ($) { }) .get(), sort_order: $('#sort-order').val(), + paged: paged, }; $.post(resourceFilterAjax.ajaxurl, formData, function (response) { @@ -74,6 +74,7 @@ jQuery(document).ready(function ($) { $('#resource-results').html(response.html); $('#result-count').text(response.count); + // Update pagination if (response.pagination) { $('.pagination').html(response.pagination.join('')); } @@ -88,7 +89,7 @@ jQuery(document).ready(function ($) { let filterType = $filter.data('type'); let filterValue = $filter.data('value'); - // Clear the relevant filter + // Remove the corresponding filter if (filterType === 'search') { $('#search').val(''); } else if (filterType === 'resource_type') { @@ -106,7 +107,7 @@ jQuery(document).ready(function ($) { } // Re-trigger filtering after removing the filter - triggerFiltering(); + triggerFiltering(1); }); // Handle form submission @@ -147,4 +148,15 @@ document.addEventListener('DOMContentLoaded', function () { }); } }); + + // Handle pagination click + $(document).on('click', '.pagination a', function (e) { + e.preventDefault(); + + // Extract the page number from the link + let paged = $(this).attr('href').match(/paged=(\d+)/)[1]; + + // Trigger filtering for the selected page + triggerFiltering(paged); + }); }); diff --git a/assets/style.css b/assets/style.css index 4386700..7320f91 100644 --- a/assets/style.css +++ b/assets/style.css @@ -124,6 +124,33 @@ .filter-item button.remove-filter:hover { color: #d63638; } +.pagination { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.pagination a, +.pagination span { + margin: 0 5px; + padding: 8px 12px; + text-decoration: none; + color: #0073aa; + border: 1px solid #ddd; + border-radius: 4px; +} + +.pagination a:hover { + background: #0073aa; + color: #fff; +} + +.pagination .current { + background: #0073aa; + color: #fff; + border-color: #0073aa; +} + @media (min-width: 768px) { /* Tailwind 'md' breakpoint */ #resource-results { grid-template-columns: repeat(2, minmax(0, 1fr)); diff --git a/resource-filter.php b/resource-filter.php index cd7bab6..21d790f 100644 --- a/resource-filter.php +++ b/resource-filter.php @@ -72,7 +72,8 @@ class ResourceFilterPlugin { $query_args = [ 'post_type' => 'resource', - 'posts_per_page' => -1, + 'posts_per_page' => 12, // Show 12 results per page + 'paged' => max(1, get_query_var('paged', 1)), // Get current page number 'tax_query' => [], 's' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '', ]; @@ -137,7 +138,8 @@ class ResourceFilterPlugin { } else { $query = new WP_Query([ 'post_type' => 'resource', - 'posts_per_page' => -1, + 'posts_per_page' => 12, // Show 12 results per page + 'paged' => max(1, get_query_var('paged', 1)), // Get current page number ]); } @@ -169,6 +171,18 @@ class ResourceFilterPlugin { } else { $this->loadResources(); // Load all resources initially } + + $pagination_links = paginate_links([ + 'total' => $query->max_num_pages, + 'current' => max(1, get_query_var('paged', 1)), + 'format' => '?paged=%#%', + 'prev_text' => '«', + 'next_text' => '»', + ]); + + if ($pagination_links) { + echo ''; + } ?> 'resource', - 'posts_per_page' => -1 + 'posts_per_page' => 12, // Show 12 results per page + 'paged' => max(1, get_query_var('paged', 1)), // Get current page number ]; $query = new WP_Query($query_args); @@ -225,9 +240,10 @@ class ResourceFilterPlugin { $query_args = [ 'post_type' => 'resource', - 'posts_per_page' => -1, + 'posts_per_page' => 12, // Show 12 results per page + 'paged' => isset($_POST['paged']) ? intval($_POST['paged']) : 1, // Get current page number 'tax_query' => [], - 's' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '', + 's' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '', ]; // Sorting logic @@ -303,13 +319,21 @@ class ResourceFilterPlugin { if ($is_ajax) { // Prepare response JSON $response = [ - 'count' => $query->found_posts, + 'count' => $query->found_posts, 'filters' => [ - 'search' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '', - 'resource_type' => !empty($_POST['resource_type']) ? sanitize_text_field($_POST['resource_type']) : '', + 'search' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '', + 'resource_type' => !empty($_POST['resource_type']) ? sanitize_text_field($_POST['resource_type']) : '', 'resource_subject' => !empty($_POST['resource_subject']) ? sanitize_text_field($_POST['resource_subject']) : '' ], - 'html' => ob_get_clean() + 'html' => ob_get_clean(), + 'pagination' => paginate_links([ + 'total' => $query->max_num_pages, + 'current' => isset($_POST['paged']) ? intval($_POST['paged']) : 1, + 'format' => '%#%', + 'prev_text' => '«', + 'next_text' => '»', + 'type' => 'array' + ]) ]; echo json_encode($response);