[newbie] Check All checkboxes fonction
[newbie] Check All checkboxes fonction
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
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
This discussion has been closed.
Replies
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
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.
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
[code]
$('input', tab.fnGetNodes()).attr('checked','checked');
[/code]
Regards,
Allan
Edited with a little bit better jQuery code...
$('#checkall').click( function() {
$('input', oTable.fnGetNodes()).each( function() {
$('input', oTable.fnGetNodes()).attr('checked','checked');
} );
return false; // to avoid refreshing the page
} );
HTML:
geekforever.
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
$('#checkall').click( function() {
$('input', oTable.fnGetNodes()).attr('checked','checked');
return false; // to avoid refreshing the page
} );
Finally, it was simple.
[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
Nice one - thanks for posting your code (and noting the API plug-in for filtered rows) :-)
Regards,
Allan
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
Maybe your check_all checkbox isnt already there when jQuery is trying to apply the click-funktion, because it's server sided?
Any Ideas?
use fnInitComplete:
[code]"fnInitComplete" : function () {$('#check_all').click( function() {$('input', oTable.fnGetNodes()).attr('checked',this.checked);});}[/code]
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.
The only question remains: How to do this only for a single column, as I have multiple checkbox columns.
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]
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?
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
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 :)
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
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]
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 !!!
[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]
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.
In fnGetFilteredNodes() firstpage it checked and for other pages its unchecked only so each time its
refreshing.
Still am having problem
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...
$('input', oTable.fnGetNodes()).attr('checked', true);
Does that work? If not, please give us a link to your page.
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
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);
}