How to persist button selections when changing pages with pagination (But not on refresh)

To persist the button selections when changing pages with pagination, you can use JavaScript to store the selected options in the browser's local storage. When the user navigates to a new page, you can retrieve the stored selections and update the buttons accordingly. To distinguish between a pagination action and a refresh, you can add a query parameter to the pagination links and check for its presence in your server-side code. Here's an example implementation:

1. Add a query parameter to the pagination links:

{{ $rows->appends(['page_action' => 'paginate'])->links() }}

1. Use JavaScript to store the selected options in local storage:

$(document).on('click', '.buttons button', function() {
    var rowId = $(this).closest('tr').data('id');
    var option = $(this).text();
    localStorage.setItem('row_' + rowId, option);
});

1. Use JavaScript to retrieve the stored selections and update the buttons:

$(document).ready(function() {
    $('.buttons button').each(function() {
        var rowId = $(this).closest('tr').data('id');
        var option = localStorage.getItem('row_' + rowId);
        if (option) {
            $(this).removeClass('selected');
            $(this).siblings().addClass('selected');
        }
    });
});

$(document).on('click', '.pagination a', function() {
    localStorage.clear();
});

1. Check for the presence of the query parameter in your server-side code:

if (request()->query('page_action') !== 'paginate') {
    // Save the selections
}