CODEWITHSUNDEEP
javascript
tonyf
tonyf

Reputation: 35577

Check all checkbox with pagination

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?

Upvotes: 0

Views: 3141

Answers (3)

anddoutoi
anddoutoi

Reputation: 10111

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?

Upvotes: 1

Jonathan Fingland
Jonathan Fingland

Reputation: 57187

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

e.g. 

<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.

Upvotes: 1

rahul
rahul

Reputation: 187110

If you want javascript to do this kind of feature then all your checkboxes have to be rendered to the screen.

Upvotes: 2

Related Questions