Select records on multiple table view pages

[sgrzy01]

I have an application that prepares a report from a set of selected records in a table view. As the application has grown my users want to be able to select records from multiple pages.

Currently if you select some records, the "more" dropdown appears, all good... and (really, as expected) if you goto the next page of the table view, "more" disappears and if you go back, previously selected records are clear.

My users only want a 10 record view and before I try to convenience to expand that and use filters to get the records they want to appear on theat first page, I wanted to reach out to see if anyone tackled this issue in the past.

So.. basically, to be able to select records on multiple table view pages and have them acted on by batch_actions.

Thanks!
(Running 22.1 w/ appworxx js library)

[pbottcher]

Hi,

maybe this can help you as a starting point. You may use the local storage of the browser to kee track of the current selected rows.

Add to your hooks/TABLENAME-tv.js

Code: Select all

$j(function() {
	const item=AppGini.currentTableName()+"_storedboxes";
	var	storedBoxes = JSON.parse(localStorage.getItem(item));
	if (storedBoxes==null) {
		storedBoxes=[];
	}
	else {
		$j('.selected_records').removeClass('hidden');
	}
	storedBoxes.forEach(function(id) {
		$j('#record_selector_'+id).prop('checked',true);
	});


	$j('#select_all_records,.record_selector').on('click',function () {
		storedBoxes = JSON.parse(localStorage.getItem(item));
		if (storedBoxes==null) {
			storedBoxes=[];
		}
		else {
			$j('.selected_records').removeClass('hidden');
			$j('.selected_records').addClass('hidden');
		}

		$j('.record_selector').each(function () {
			id=$j(this).parents('tr').attr('data-id');
			if ($j(this).prop('checked')) {
				storedBoxes.push(id);
			}
			else {
				storedBoxes=storedBoxes.filter(e => e !== id);
			}
		})
		storedBoxes=storedBoxes.filter((v, i, a) => a.indexOf(v) === i)
		localStorage.setItem(item, JSON.stringify(storedBoxes)); 
}	)
})

Now, with your custom function that you call with the selected ids you need to reference the data from the local storage.

Code: Select all

	const item=AppGini.currentTableName()+"_storedboxes";
	var	ids = JSON.parse(localStorage.getItem(item));

As this will keep the selected item active even if if you close your browser and reopen the TV, you might want to clean the localstorage if the user visits the the page again. Or add an option for the user to "clear all selected". But this is up to your needs.

[sgrzy01]

Perfect! Thank you!

I was able to add a quick clear local storage function even with my limited js skills and its working as I hoped!