Clicked row in the Parent table to remain persistently highlighted (Master-Detail plugin addon)#616

Introduce additional customisation ability to Master-Detail plugin addon that does the following….

Situation: A user clicks a row in the Parent table and gets redirected to the Template Page where the Child data is shown. When the user goes back to the Parent table they are unable to see which row they actually clicked.

Required: The clicked row in the Parent table to remain persistently highlighted so that the user can clearly see which row was selected. (Similarly, same approach should be used for a button click.)

Temporary workaround: wpDatatables support advised that the requested ability is not currently available in Master-Details plugin, and suggested that a workaround would require a JavaScript event listener to detect the click and apply a custom CSS class accordingly. I have undertaken research on how this might be achieved. After borrowing several bits of code suggested by the Google Search AI (many suggestions do not work) and other information, I have successfully achieved the desired result as follows and also tested it on the wpDatatables sandbox .
It does have some limitations:

1. The javascript is applied to table_1 on all webpages containing a table. I have not been able to find a reliable way of programmatically determining if the target table is a parent table in order to direct appropriate processing.
2. In order to prevent the CSS custom code being applied to all tables, I have not placed it in the overall settings. Instead I have entered it in the settings of each of the individual target tables.

javascript

Add a JavaScript Event Listener to detect a row click on the master table and apply the logic. Put the following script in the wpDataTables overall “Settings>”Custom JS and CSS”>”Custom wpDataTables JS”

jQuery(window).on(‘load’, function() // Replace ‘table_1’ with the ID table placement on your page if the target master table is not the 1st table on the web page (e.g.’table_2’)
if (typeof wpDataTables.table_1 !== ‘undefined’) jQuery(‘#table_1 tbody’).on(‘click’, ‘tr’, function(e) // Remove the class from any previously highlighted row
jQuery(‘#table_1 tbody tr.wdt-master-row-clicked’).removeClass(‘wdt-master-row-clicked’);

        // Add the class to the clicked row
        jQuery(this).addClass('wdt-master-row-clicked');

        // The default wpDataTables click event for master-detail will proceed automatically
        // if "Row click" is set in the Master-detail settings.
    });
}

});

CSS

Put the CSS code in the specific wpDataTable Master Table “Settings>”Customize”>”Custom CSS”

.wdt-master-row-clicked color: green;
font-weight: bold;
}

Thank You
Graham Wilkie