"Select all" issue when using the tablesorter

Question

I have a search screen where it displays the data. If I get 200 rows. selectAll selects all the checkboxes for all the rows.

My problem is when user filter the rows by selecting filter options rows will reduce to 70 or so based on the filter at that time my selectAll still selects all 200 rows. I want to select only the filtered rows. We are using jQuery for filtering the code for this is below. If possible pure JavaScript solution would be best (as I don't know much about jQuery). jQuery is last preference but OK. I would just be happy to get the page working.

Here is my code :

<script src="js/jquery-1.4.4.min.js" type="text/javascript" />
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>


<h:commandButton  type="button" id="selectAll" value="Select All"   onclick="selectAllCheckboxes()">

selectAllCheckboxes()

Code below :

var checkboxes = table.getElementsByTagName('INPUT');
for (var i = 0; i < checkboxes.length; i++) {
                     if (checkboxes[i].type == 'checkbox' && checkboxes[i].disabled ==false) {
             checkboxes[i].checked = true;
         }
    }

score 1 · Accepted Answer · answered Oct 19 '15 at 15:26

1

Assuming your checkboxes are children of the tr that are filtered you can do this (untested but should work):

selectAllCheckboxes(){
    $('tr:not(.filtered) input[type=checkbox]').attr('checked', 'checked');
}

if you're going to use jQuery you might as well use it for everything. It drives me crazy to see people using jQuery and still typing out "document.getElementById('id')" when $('#id') does the same thing. Also using jQuery to select the array of elements you can set attributes on all the elements in the array without doing the for loop.

answered Oct 19 '15 at 15:26

Gregg Duncan

2,635
1
14
20

wow. looks like its working, but it selecting the disabled checkboxes also. can you please adjust the above code to avoid selecting the disabled check box ? – user1601680 Oct 19 '15 at 15:44
You could do this: $('tr:not(.filtered) input[type=checkbox]:enabled').attr('checked', 'checked'); – Gregg Duncan Oct 19 '15 at 16:27

score 0 · Answer 2 · answered Oct 19 '15 at 15:19

0

Optional solution: When you filter rows, add to each row attribute filtered=true, Then on selectAll select only rows with this attribute e.g.

    var filteredRows=$('rows[filtered]');
    var notFilteredRows=$('rows:not([filtered])');

You did not posted HTML, thus as I saw the complete solution:

$('rows[filtered]').each(function(){
   $(this).closest('input[type=checkbox]').attr('checked','checked');
});

answered Oct 19 '15 at 15:19

AlexBerd

1,368
2
18
39

as filtering and sorting we are using the external plugin, I am not sure how to play with jQuery. And not sure what attribute its adding the jQuery to hide the rows in dataTable. – user1601680 Oct 19 '15 at 15:25

"Select all" issue when using the tablesorter

2 Answers2