Merge pull request #5858 from Laravel-Backpack/fix-filter-navbar

Fix the filter navbar

Author: pxpm

src/resources/views/crud/components/datatable/datatable_logic.blade.php

@@ -783,21 +783,49 @@ function resizeCrudTableColumnWidths() {
 // Support for multiple tables with filters
 document.addEventListener('backpack:filters:cleared', function (event) {       
     // Get the table ID from the event detail or default to the current table ID
-    const tableId = event.detail && event.detail.tableId ? event.detail.tableId : 'crudTable';
+    let tableId = event.detail && event.detail.tableId ? event.detail.tableId : 'crudTable';
     
-    if (!window.crud.tableConfigs[tableId]) return;
+    // If the specific table config doesn't exist, try to find the first available table
+    if (!window.crud.tableConfigs[tableId]) {
+        // Get the first available table config
+        const availableTableIds = Object.keys(window.crud.tableConfigs);
+        
+        if (availableTableIds.length > 0) {
+            tableId = availableTableIds[0];
+        } else {
+            return;
+        }
+    }
     
     const config = window.crud.tableConfigs[tableId];
     
-    // behaviour for ajax table
-    var new_url = `${config.urlStart}/search`;
+    // Get the table instance first
     var ajax_table = window.crud.tables[tableId];
+    if (!ajax_table) {
+        // Try to get the first available table if the specific one doesn't exist
+        const availableTableIds = Object.keys(window.crud.tables);
+        if (availableTableIds.length > 0) {
+            tableId = availableTableIds[0];
+            ajax_table = window.crud.tables[tableId];
+        } else {
+            return;
+        }
+    }
+    
+    // behaviour for ajax table - get the current URL and remove query parameters
+    let currentAjaxUrl = ajax_table.ajax.url();
+    
+    // Parse the URL and remove all query parameters except essential ones
+    let urlObj = new URL(currentAjaxUrl);
+    let new_url = urlObj.origin + urlObj.pathname;
 
     // replace the datatables ajax url with new_url and reload it
     ajax_table.ajax.url(new_url).load();
 
     // remove filters from URL
-    config.updateUrl(new_url);       
+    if (config.modifiesUrl) {
+        config.updateUrl(new_url);       
+    }
 });
 
 document.addEventListener('backpack:filter:changed', function (event) {

src/resources/views/crud/inc/filters_navbar.blade.php

@@ -193,19 +193,61 @@ function refreshDatatablesOnFilterChange(url, tableId = 'crudTable')
                     let closestTable = null;
                     let navbarParent = navbar.parentElement;
                     
-                    // Look for the datatable in the DOM
+                    // Look for the datatable in the DOM - search in the entire document if needed
                     if (navbarParent) {
-                        // First try to find a table with an ID that starts with the specified prefix
-                        closestTable = navbarParent.querySelector('table[id^="datatable"]');
+                        // First try to find a table with class crud-table
+                        closestTable = navbarParent.querySelector('table.crud-table');
+                        
+                        // If not found, try to find a table with an ID that starts with "crudTable"
+                        if (!closestTable) {
+                            closestTable = navbarParent.querySelector('table[id^="crudTable"]');
+                        }
                         
                         // If not found, try to find any table that might be the datatable
                         if (!closestTable) {
                             closestTable = navbarParent.querySelector('table.dataTable');
                         }
+                        
+                        // If still not found, search in the whole document
+                        if (!closestTable) {
+                            closestTable = document.querySelector('table.crud-table');
+                        }
+                        
+                        // Last resort - any crudTable in the document
+                        if (!closestTable) {
+                            closestTable = document.querySelector('table[id^="crudTable"]');
+                        }
                     }
                     
                     // Get the table ID if found, otherwise use the default 'crudTable'
-                    let tableId = closestTable ? closestTable.id : 'crudTable';
+                    let tableId = 'crudTable'; // Default fallback
+                    
+                    if (closestTable) {
+                        // Try to get the ID attribute first
+                        tableId = closestTable.getAttribute('id') || '';
+                        
+                        // If no ID found, try to get it from the DataTable instance
+                        if (!tableId && $.fn.DataTable.isDataTable(closestTable)) {
+                            try {
+                                const dt = $(closestTable).DataTable();
+                                if (dt && dt.table && dt.table().node && dt.table().node().id) {
+                                    tableId = dt.table().node().id;
+                                }
+                            } catch (e) {
+                                // Silently continue if error getting ID from DataTable
+                            }
+                        }
+                        
+                        // If still no ID, check the navbar's data-component-id
+                        if (!tableId) {
+                            tableId = navbar.getAttribute('data-component-id') || '';
+                        }
+                        
+                        // Last resort - use default
+                        if (!tableId) {
+                            tableId = 'crudTable';
+                        }
+                    }
                     
                     document.dispatchEvent(new CustomEvent('backpack:filters:cleared', {
                         detail: {