I'm working on a Responsive Web Design project. There is this table which can potentially go up to hundreds of records, so we are using a pagination block below it. On first load, user has the choice of display 10, 25 or 50 records in a dropdown. Our breakpoint is 600px. Let's take 25 records as an example:
In desktop view, first 25 records appears. User clicks on page 2 of pagination and next 25 apppears. The number of records in the table is always 25.
In mobile view, the table collapses into an accordion. The record-per-page drop down is hidden. The pagination block is hidden. Instead, a button "Show Next 25" is shown below the accordion. Upon click, the next 25 records will be shown. Making it 50 in total.
The problem comes when some devices' width is greater than our breakpoint. (e.g. HTC One with 640px width). In those devices, if user first loads the accordion in portrait mode, then clicks on "Show Next 25" button, and rotates the phone to landscape mode (with pagination and record-per-page drop down and no more button), then what should the user see?
We have a few options:
In mobile view, when "Show Next 25" button is clicked, instead of adding on 25, just show the next 25. So when user rotates back to landscape (desktop) view, he/she will be on page 2 of pagination. Drawback: user cannot go back to first 25 records in mobile view.
Always only display "Show Next 25" button and remove pagination. So user will see "Show Next 25" even when he views in a desktop browser Drawback: "Show Next 25" button looks strange on wide screen.
In mobile view, instead of showing "Show Next 25" button only, add a "Show Previous 25" button. Thus making it a mini-pagination in mobile view. Upon click the button, the next/previous 25 will be loaded. The number of records on the page stays at 25. Drawback: It is still a pagination but shorter in length.
I'm not very sure which approach to take, or if there is Option 4. I appreciate your inputs.