DataTables logo DataTables

via Ad Packs
[newbie] Check All checkboxes fonction
  • Vote Up0Vote Down theyouyoutheyouyou
    Posts: 12
    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:
    <td width="3%" align="center"><input type="checkbox" name="exportchk" value="<?php echo $tabres[0] ?>"></td>

    Submit button:
    <input type="submit" name="checkall" title="Check All"/>

    And the newbie JQuery code that doesn't work:

    $('#checkall').submit( function() {
    var nNodes = $('input', tab.fnGetNodes());
    for ( var i=0 ; i<nNodes.length ; i++ )
    {
    $("exportchk").setAttribute('checked');
    }
    var nHiddenNodes = $('input', tab.fnHiddenGetNodes());
    for ( var i=0 ; i<nHiddenNodes.length ; i++ )
    {
    $("exportchk").setAttribute('checked');
    }
    } );
  • 36 Comments sorted by
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down theyouyoutheyouyou
    Posts: 12
    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.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    Thinking about it, you don't even need to break the processing into two parts - how about:

    $('input', tab.fnGetNodes()).attr('checked','checked');

    Regards,
    Allan

    Edited with a little bit better jQuery code...
  • Vote Up0Vote Down theyouyoutheyouyou
    Posts: 12
    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:
    <form id="checkall"><input type="submit"/></form>


    geekforever.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down theyouyoutheyouyou
    Posts: 12
    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.
  • Vote Up0Vote Down theyouyoutheyouyou
    Posts: 12
    ...
  • Vote Up0Vote Down davidadambeckerdavidadambecker
    Posts: 2
    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:

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

    #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
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    Hi Dave,

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

    Regards,
    Allan
  • Vote Up0Vote Down BlalienBlalien
    Posts: 17
    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
  • Vote Up0Vote Down pashpash
    Posts: 9
    >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?
  • Vote Up0Vote Down pashpash
    Posts: 9
    Yeah, found a solution:

    use fnInitComplete:

    "fnInitComplete"  : function () {$('#check_all').click( function() {$('input', oTable.fnGetNodes()).attr('checked',this.checked);});}
  • Vote Up0Vote Down giorgio79giorgio79
    Posts: 43
    Hi Guys,

    Been trying your code but no luck:

    Here is the code:
    Jquery
    $('#check_all').click( function() {
	var oTable = $('#MYTABLEID').dataTable();	
							
	$('input', oTable.fnGetFilteredNodes()).attr('checked',this.checked);
} );

    and HTML inside one of the table header columns
    <input type="checkbox" id="check_all"/>

    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.
  • Vote Up0Vote Down giorgio79giorgio79
    Posts: 43
    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.
  • Vote Up0Vote Down giorgio79giorgio79
    Posts: 43
    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

    		 "fnInitComplete"  : function () {$('#check_all').click( function() {$('input[name*=\'selected\']', oTable.fnGetNodes()).attr('checked',this.checked);});},
  • Vote Up0Vote Down giorgio79giorgio79
    Posts: 43
    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?
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down giorgio79giorgio79
    Posts: 43
    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 :)
  • Vote Up0Vote Down shahidshahid
    Posts: 4
    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
  • Vote Up0Vote Down zmanzman
    Posts: 2
    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: 

    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');
	}
});
  • Vote Up0Vote Down alainalain
    Posts: 2
    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 : 

    
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
					<thead>
						<tr>
	<th  style="background-attachment: fixed;"><input type="checkbox" id="check_all" name="check_all" class="checkall" value="ON"></th>

							<th><?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL2'); ?></th>
							<th><?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL3'); ?></th>
							<th><?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL4'); ?></th>
							<th><?php echo JText::_('COM_RECHERCHECRE_RESULTAT_COL5'); ?></th>
						</tr>
					</thead>
					<tbody>
						<?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 = '<a target="_blank" href="/images/documentation/'.strtolower($value['cre_doc_link']).'.pdf" ><img src="'.$this->baseurl.'/media/com_recherchecredit/images/pdficon17x17.png"/></a>';
				    			}
				    			echo '<tr class="gradeU">';
				    				echo '<th><input type="checkbox" name="ligne_serie" class="checkers" value="'.$value['cre_id_serie'].'" id="id_serie='.$value['cre_id_serie'].'"></th>';
				    				echo '<td>'.$value['acr_label_'.$langue].'</td>';
				    				echo '<td>'.$value['cre_id_serie'].'</td>';
				    				echo '<td>'.$value['cre_label_serie'].'</td>';
				    				echo '<td align="center">'.$doc.'</td>';			    			
				    			echo '</tr>';				    			
				    		}
						}


    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 !!!
  • Vote Up0Vote Down alainalain
    Posts: 2
    Sorry dats the correct part of the script.

    	$(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);
		} );
  • Vote Up0Vote Down DhurgaDhurga
    Posts: 10
    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.
  • Vote Up0Vote Down davidadambeckerdavidadambecker
    Posts: 2
    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).
  • Vote Up0Vote Down DhurgaDhurga
    Posts: 10
    Thanks David,

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

    Still am having problem
  • Vote Up0Vote Down DhurgaDhurga
    Posts: 10
    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...
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    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
  • Vote Up0Vote Down DhurgaDhurga
    Posts: 10
    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
  • Vote Up0Vote Down johnkjohnk
    Posts: 1
    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);

    }
  • Vote Up0Vote Down JoyrexJoyrex
    Posts: 13
    This thread has been incredibly helpful in solving the issue of checking checkboxes that are not visible on the current page, and the above code works - however, one thing that still remains (and frankly I'm surprised nobody mentioned it here) is those hidden checked checkboxes do not get submitted when using it in a form - any ideas?
  • Vote Up0Vote Down imhalfpirateimhalfpirate
    Posts: 9
    @JoyRex

    http://datatables.net/examples/api/form.html

    ^ You can do this.

    I'm doing it a little differently. I have a hidden field, and when I call AJAX submit I run this:

    checkedCheckboxes = $("input:checked", yourDataTableVariable.fnGetNodes()).map(function(){
return this.id
});

    What I get in return is a long list of the checkbox ID's which I set up as all numerical (392, 952, 935, 953, 293). I then seperate these server side when I insert them in the table. You don't have to do it this way, but I wanted you to see both ways of getting all the hidden checkboxes.
  • Vote Up0Vote Down SurtidoSurtido
    Posts: 5

    Joyrex January 10
    Posts: 13
    This thread has been incredibly helpful in solving the issue of checking checkboxes that are not visible on the current page, and the above code works - however, one thing that still remains (and frankly I'm surprised nobody mentioned it here) is those hidden checked checkboxes do not get submitted when using it in a form - any ideas?

    it was mentioned, but nobody asked it. Anybody have a clue?
  • Vote Up0Vote Down SurtidoSurtido
    Posts: 5
    hidden checked checkboxes do not get submitted when using it in a form - solution:
    http://datatables.net/examples/api/form.html
  • Vote Up0Vote Down adromiladromil
    Posts: 27
    I am using also a checkall event in javascript:
    however it is not working if my entries a more that the paginated items, what I mean is that it is only working in the first page and not on the other pages.

    Can somebody give me inputs here?

    Thank you in advanced
  • Vote Up0Vote Down yuanyeqishiyuanyeqishi
    Posts: 2
    thanks for your help, i fixed my issues.
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion