Check all checkbox with pagination

Question

I currently have a report with pagination, that displays 20 records at a time. In total, there are 600 records.

Within this report, I also have a checkbox column for every record. Based on this, my queries are as follows:

1. I want to incorporate a "Check All" feature, so based on my scenario which displays 20 records (total of 600 records overall), when I press the "Check All" checkbox, I would actually like to check all 600 records and not just the 20 per pagination.

   Is this possible with JavaScript, as the total number of records will vary?

2. Same concept as point (1), if I have a "Submit" button, I actually want to validate that all 600 records have been checked, even though I am only looking at 20 records at a time

   Is this possible?

Answer 1

如果您希望javascript使用这种功能，则必须将所有复选框都呈现到屏幕上。

Answer 2

If you really want your "Check All" box to mean check all across pages, then 'd recommend checking for that on the server side.

eg

<ul>
    <li><input type='checkbox' name='item_ids[]' value='1'/>Item 1</li>
    <li><input type='checkbox' name='item_ids[]' value='2'/>Item 2</li>
    <li><input type='checkbox' name='item_ids[]' value='3'/>Item 3</li>

    <li><input type='checkbox' name='check_all' value='check_all'/></li>

</ul>

Be aware of course, that "checking" boxes that the user can't see means they can't select all and then deselect individual ones. It's also somewhat counter-intuitive to check all across pages. Most implementations of this sort of thing only affect the page you are currently viewing. I would perhaps use a different control (a separate button) for this kind of functionality.

Answer 3

imo this might not be what the user expect and as we all know that the golden rule of usability is to not surprise the user. I would suggest a button or a link that very clearly states that this action will "select all, and with all, I mean all records across all pages".

Another possible solution that I seen alot is a link that says "show all on one page". After the user clicked and the page reloaded with all records and no pagination they can select all.

But to actually answer your question I need more information. Is the pagination serverside? Or do the server actually serves the 600 records but they are sliced and diced into 20/20 chunks on the client?