Combining pagination and selection

Question

The user sees a paginated table of items. For each item/row there is a checkbox to the left that lets the user select that row.

Below the table a button: "Compare selected".

The user can select several (more than two) rows and click "Compare selected" to go to another page that compares the selected rows.

What is the best way to handle that the user wants to compare a row on page one and page three? How do I indicate that the row that was selected on page one is still selected when the user displays a different page?

Answer 1

I would repeat the selected items with their checked box on the top of the table when the user navigates to another page.

This has the benefit of keeping them visible and allow the user to uncheck one of them any time.

The drawback is when the user wants to select a lot of items, there isn't much more room for the paginated items. How to handle this depends on the available space.

Another solution is to keep a reduced representation of the selected items, like only its name and a "x" icon to cancel each of them. This takes less space but is less readable if you don't have a title that clearly identifies the item.

Answer 2

What about displaying the next page of results below the first page? Show the first 10 results, then have a "show next 10" button at the bottom. It loads the next "page" of results below the existing set.

The context remains the same so you can maintain the selected rows.

I've never seen this pattern before but I can imagine it working well.

Answer 3

Here's my current solution:

• I chose to use pushpin icons instead of checkboxes.
• I use @Mart's suggestion to repeat the selected items at the top.
• I also like the suggestion to move the selected items to the top right away, but have not implemented this.
• The buttons with selection actions are visible only when at least one item is selected.
• I have set the page size to five just for the screenshots, page size is twenty in the real app.

Screenshots:

a) Table with nothing selected:

b) Selected couple of items on page one. Note that I also have a another view of selected items. The user can change the order that items appear in the comparison by rearranging the labels using drag/drop.

c) Moved to page three and selected an item