[newbie] Check All checkboxes fonction

theyouyou

Hello,

I'm trying to make a function that checks all checkboxes in the DataTable, including hidden rows.

Here's the html code for the "checkbox" column:


Submit button:


And the newbie JQuery code that doesn't work:

$('#checkall').submit( function() {
var nNodes = $('input', tab.fnGetNodes());
for ( var i=0 ; i

allan

Hi geekforever,

Looks okay from a quick scan. The only question I have is: what is the variable 'tab'? I presume that this is the result of:

var tab = $(...).dataTable(...)

? If so it's slightly odd naming :-).

Do you get any Javascript errors in Firebug or reported by whatever browser you are using (with JS debug enabled).

Thanks,
Allan

theyouyou

Thanks Allan for responding quickly,

Yes tab equals oTable, I've changed it back :)
Firebug doesn't report anything, and if you say that the syntax is correct I really don't have any clue.
I'm finally getting rid of this "checking all checkboxes" method...
Greetings,

geekforever.

allan

Hi,

Okay thanks for the feedback - I've just scanned your code again and I think I've spotted something:

> $("exportchk").setAttribute('checked');

There are two things wrong with this:

1. You are telling it what attribute to set, but not what value it should take.
2. setAttribute is a DOM function, rather than a jQuery function.

Take a look at the jQuery documentation for this: http://docs.jquery.com/Attributes/attr#keyvalue

You could try:

$("exportchk").attr('checked', 'checked');

Allan

allan

Thinking about it, you don't even need to break the processing into two parts - how about:

[code]
$('input', tab.fnGetNodes()).attr('checked','checked');
[/code]

Regards,
Allan

Edited with a little bit better jQuery code...

theyouyou

That worked! Many thanks Allan. I'm less ignorant from now.


$('#checkall').click( function() {
$('input', oTable.fnGetNodes()).each( function() {
$('input', oTable.fnGetNodes()).attr('checked','checked');
} );
return false; // to avoid refreshing the page
} );


HTML:



geekforever.

allan

Good stuff :-)

I don't think you need the line "$('input', oTable.fnGetNodes()).each( function() {" though (and therefore it's closing parenthesis). Should work just fine with that single line I posted.

Allan

theyouyou

Indeed, with over 200 rows, that line was crashing the navigator.

$('#checkall').click( function() {
$('input', oTable.fnGetNodes()).attr('checked','checked');
return false; // to avoid refreshing the page
} );

Finally, it was simple.

theyouyou

...

davidadambecker

If you'd like to have a checkbox in the header of a column that will accomplish this, instead of a button, you can use the following to code to check all and uncheck all:

[code]
$('#check_all').click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
} );
[/code]

#check_all is the ID of your check all checkbox. This will check all rows, hidden or not hidden.

Allan, is there a way to check only filtered rows, even if it's on a different page in the pagination? I consider pagination a way of formatting the display of the rows, but it seems like rows not on the current page get considered to be a filtered row. I don't want a row on page 2 to NOT be considered; I want only filtered out rows (based on search, etc.) to not be considered. Does that make sense? Let me know if I can make this more clear.

Update: I think I found what I'm looking for. By using fnGetFilteredNodes() instead of fnGetNodes(), it will check only those rows that have been filtered, but still checking the rows on subsequent pages. For those of you wanting to use this, you can find this function in the Custom API Functions section of Plug-ins. Thanks!

Thanks,
Dave

allan

Hi Dave,

Nice one - thanks for posting your code (and noting the API plug-in for filtered rows) :-)

Regards,
Allan

Blalien

Can't seem to get this to work.
I am using a server sided datatable.

What I need is three checkboxes in the THEAD.
And three radio buttons in a TD.

Thanks,
Blalien

pash

>Can't seem to get this to work.

Maybe your check_all checkbox isnt already there when jQuery is trying to apply the click-funktion, because it's server sided?

Any Ideas?

pash

Yeah, found a solution:

use fnInitComplete:

[code]"fnInitComplete" : function () {$('#check_all').click( function() {$('input', oTable.fnGetNodes()).attr('checked',this.checked);});}[/code]

giorgio79

Hi Guys,

Been trying your code but no luck:

Here is the code:
Jquery
[code]
$('#check_all').click( function() {
var oTable = $('#MYTABLEID').dataTable();

$('input', oTable.fnGetFilteredNodes()).attr('checked',this.checked);
} );

[/code]

and HTML inside one of the table header columns
[code]

[/code]

I have several checkbox columns, how would I do this per column, instead of the entire table?

When I put this in the header, it sorts instead of checking all checkboxes. I would still like to sort when I click on the table header text, but such a checkbox would be great.

giorgio79

Ok, I had a DOM table (to enable input field sorting) and I had to use pash's solution with fninitcomplete. It works now.

The only question remains: How to do this only for a single column, as I have multiple checkbox columns.

giorgio79

Actually the answer was simpler than I thought.

Using some jquery selector magic, I just need to match the name or id of the checkboxes per each column like this

[code]
"fnInitComplete" : function () {$('#check_all').click( function() {$('input[name*=\'selected\']', oTable.fnGetNodes()).attr('checked',this.checked);});},

[/code]

giorgio79

Noticed couple of issues:

1. If checkall is in header next to title, on click the table is also sorted when sorting is enabled
2. After clicking on checkall, the Search function does not work anymore, it always brings up an empty search result

Any ideas?

allan

1. Have a look at this thread which talks about using stopPropagation to stop event bubbling: http://datatables.net/forums/comments.php?DiscussionID=2661&page=1#Item_6

2. What are you searching for? The value of the checkbox? You'd need to do live DOm filtering for that: http://datatables.net/development/filtering

Allan

giorgio79

Thanks Allan.

1. Will check it

2. I am searching for any value, like a letter 'a' whcih is present in a lot of rows. After using the checkall box once, search stops working, and it always returns an empty set.

3. I noticed a new issue. My code does not work for some reason if I replace fnGetNodes with fnGetFilteredNodes. What could cause this?

PS: point 3 is solved, sorry I did not realise I have to install the function as it is inside the Plugins API. Ouch :)

shahid

Hi,

I have successfully implemented clickable rows. The problem is I have a column of checkboxes on which I don't want the click event will occur. The checkboxes column is to select particular rows not for opening the clickable row. How can I prevent that?

Shahid

zman

Reposting to the relevant thread...

Hi,

I've a select-all check box which selects a particular column (also check boxes in each row), with pagination enable. From UI perspective, the select-all and unselect-all works fine but when the form is submitted, only the check box values of the first page are enabled as part of the struts form bean.

Below is the code:

[code]
listTable = $('#recordlist-table').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType": "full_numbers",
"oLanguage": { "sSearch": "Search Record:"},
"oLanguage": { "sZeroRecords": "No matching Record(s) found" }
});

$('#idAnalogCheckBox').click( function() {
var oTable = $('#recordlist-table').dataTable();
if ($('#idAnalogCheckBox').attr('checked'))
{
$('INPUT[name=\'analogType\']', oTable.fnGetNodes()).attr('checked',this.checked);
}
else
{
$('INPUT[name=\'analogType\']', oTable.fnGetNodes()).removeAttr('checked');
}
});

[/code]

alain

Hi,

i have the same problem that theyouyou had, I'm trying to make a function that checks all checkboxes in the DataTable but nothing seems to work:

That's my HTML code :

[code]






<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL2'); ?>
<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL3'); ?>
<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL4'); ?>
<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL5'); ?>



<?php
if(count($this->resultat)>0){
echo count($this->resultat);
foreach ($this->resultat as $key => $value){
$doc = '-';
if(@fopen('/data/www/iods/images/documentation/'.strtolower($value['cre_doc_link']).'.pdf',"r")){
$doc = '';
}
echo '';
echo '';
echo ''.$value['acr_label_'.$langue].'';
echo ''.$value['cre_id_serie'].'';
echo ''.$value['cre_label_serie'].'';
echo ''.$doc.'';
echo '';
}
}

[/code]

And this is my script:
[code]
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aLengthMenu": <?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_LENGTHMENU'); ?> ,
"oLanguage": {
"sProcessing": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SPROCESSING'); ?>",
"sLengthMenu": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLENGTHMENU'); ?>",
"sZeroRecords": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SZERORECORDS'); ?>",
"sEmptyTable": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SEMPTYTABLE'); ?>",
"sLoadingRecords": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLOADINGRECORDS'); ?>",
"sInfo": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFO'); ?>",
"sInfoEmpty": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFOEMPTY'); ?>",
"sInfoFiltered": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFOFILTERED'); ?>",
"sInfoPostFix": "",
"sSearch": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SSEARCH'); ?>",
"sUrl": "",
"oPaginate": {
"sFirst": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SFIRST'); ?>",
"sPrevious": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SPREVIOUS'); ?>",
"sNext": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SNEXT'); ?>",
"sLast": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLAST'); ?>"
},
"fnInfoCallback": null
}
} );

} );


$(document.getElementsByName("check_all")).click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
} );


[code]
It seems my function isn't even called.
Thank You !!!

alain

Sorry dats the correct part of the script.

[code]
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aLengthMenu": <?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_LENGTHMENU'); ?> ,
"oLanguage": {
"sProcessing": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SPROCESSING'); ?>",
"sLengthMenu": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLENGTHMENU'); ?>",
"sZeroRecords": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SZERORECORDS'); ?>",
"sEmptyTable": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SEMPTYTABLE'); ?>",
"sLoadingRecords": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLOADINGRECORDS'); ?>",
"sInfo": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFO'); ?>",
"sInfoEmpty": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFOEMPTY'); ?>",
"sInfoFiltered": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SINFOFILTERED'); ?>",
"sInfoPostFix": "",
"sSearch": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SSEARCH'); ?>",
"sUrl": "",
"oPaginate": {
"sFirst": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SFIRST'); ?>",
"sPrevious": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SPREVIOUS'); ?>",
"sNext": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SNEXT'); ?>",
"sLast": "<?php echo JText::_('COM_RECHERCHECRE_RESULTAT_DATATABLES_SLAST'); ?>"
},
"fnInfoCallback": null
}
} );

} );


$('#check_all').click( function() {
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
} );

[/code]

Dhurga

Hi,
I have used checkall in datagrid and applied this line
$('input', oTable.fnGetNodes()).attr('checked',this.checked);

It doesnt work for me.

Only in the firstpage it checked and for other pages its unchecked only so each time its
refreshing.How to check all boxes in all pages of datagrid for example say from 1-40 pages at the time of selecting checkall


Please reply soon have to finish it today.

davidadambecker

Hi Dhurga, did you try using fnGetFilteredNodes() instead of fnGetNodes()? You can find this function in the API section of Plug-ins (http://www.datatables.net/plug-ins/api).

Dhurga

Thanks David,

In fnGetFilteredNodes() firstpage it checked and for other pages its unchecked only so each time its
refreshing.

Still am having problem

Dhurga

Hi,
Datagrid Check box pagination problem in php.

I have used checkall in datagrid and applied this line
$('input', oTable.fnGetNodes()).attr('checked',this.checked);
or
$('input', oTable.fnGetFilteredNodes()).attr('checked',this.checked);

It doesnt work for me.

Only in the firstpage it checked and for other pages its unchecked only so each time its
refreshing.How to check all boxes in all pages of datagrid for example say from 1-40 pages at the time of selecting checkall

Please guide me...

allan

I was doing this just yesterday and it worked okay for me:

$('input', oTable.fnGetNodes()).attr('checked', true);

Does that work? If not, please give us a link to your page.

Allan

Dhurga

Hi Allan,

Its not allowed in our company.
Whether it is due to "bServerSide": true.


oTable = jQuery('#employeeTable').dataTable( {
"bProcessing": true,
"bJQueryUI": true,
"bServerSide": true,
"iDisplayLength": 5,
"sAjaxSource": "../filename",
} );

jQuery('#chkAll').click( function() {
if (jQuery('#chkAll').attr('checked'))
{
alert("hi");
jQuery('input', oTable.fnGetNodes()).attr('checked',true);
}
else
jQuery('input', oTable.fnGetNodes()).attr('checked',false);

});

Thankyou

johnk

Using version 1.7.6 with vs2010 MVC3 application.
Each row is a partial view with a check box and associated boolean in the model class. Base on Sanderson's article:

http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

I was using the DataTable for more of a search for a person. Using pagination. So result set could bring back lots of people and then user could use the search to filter by name. Or possible they could go thru pages and just select. What I wanted was in that unlikely scenario , make sure any previous checked row was unchecked could enforce only one selection made. But if I tried for example , checking all boxes still got the following issue.

$('input', oTable.fnGetNodes()).attr('checked', false); was working fine until one set came back with almost a 1000 rows. IE8 would then bomb (script unresponsive) when I hit this code on check box click. Tried the fngetfilterednodes as well. So the following code fixed that issue. Putting it up here for a google search in case anybody else is trying something similar. Not a javascript guy so can't answer why. Just did my own loop. If there is better solution definitely interested.

function CheckOnlyOne() {


var chkid = $(this).attr('id'); //get current clicked checkbox

oTable = $('#tblPerson').dataTable();
//$('input', oTable.fnGetNodes()).attr('checked', false); //ie8 no like. go figure

var nNodes = oTable.fnGetNodes();

//uncheck any previous checkboxes on all pages
for (var i = 0; i < nNodes.length; i++) {
$('input', nNodes[i]).attr('checked', false);
}

//just recheck my current -- tried doing the previous loop similar with id for each but only did //current page

var s = '#' + chkid;
$(s).attr('checked', true);

}