[newbie] Check All checkboxes fonction

[newbie] Check All checkboxes fonction

theyouyoutheyouyou Posts: 12Questions: 0Answers: 0
edited May 2009 in General
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
«1

Replies

  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    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
  • theyouyoutheyouyou Posts: 12Questions: 0Answers: 0
    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.
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    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
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    edited May 2009
    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...
  • theyouyoutheyouyou Posts: 12Questions: 0Answers: 0
    edited May 2009
    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.
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    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
  • theyouyoutheyouyou Posts: 12Questions: 0Answers: 0
    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.
  • theyouyoutheyouyou Posts: 12Questions: 0Answers: 0
    edited May 2009
    ...
  • davidadambeckerdavidadambecker Posts: 2Questions: 0Answers: 0
    edited January 2010
    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
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    Hi Dave,

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

    Regards,
    Allan
  • BlalienBlalien Posts: 17Questions: 0Answers: 0
    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
  • pashpash Posts: 9Questions: 0Answers: 0
    >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?
  • pashpash Posts: 9Questions: 0Answers: 0
    Yeah, found a solution:

    use fnInitComplete:

    [code]"fnInitComplete" : function () {$('#check_all').click( function() {$('input', oTable.fnGetNodes()).attr('checked',this.checked);});}[/code]
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    edited September 2010
    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.
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    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.
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    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]
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    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?
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    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
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    edited September 2010
    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 :)
  • shahidshahid Posts: 4Questions: 0Answers: 0
    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
  • zmanzman Posts: 2Questions: 0Answers: 0
    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]
  • alainalain Posts: 2Questions: 0Answers: 0
    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 !!!
  • alainalain Posts: 2Questions: 0Answers: 0
    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]
  • DhurgaDhurga Posts: 10Questions: 0Answers: 0
    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.
  • davidadambeckerdavidadambecker Posts: 2Questions: 0Answers: 0
    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).
  • DhurgaDhurga Posts: 10Questions: 0Answers: 0
    Thanks David,

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

    Still am having problem
  • DhurgaDhurga Posts: 10Questions: 0Answers: 0
    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...
  • allanallan Posts: 54,881Questions: 1Answers: 8,601 Site admin
    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
  • DhurgaDhurga Posts: 10Questions: 0Answers: 0
    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
  • johnkjohnk Posts: 1Questions: 0Answers: 0
    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);

    }
This discussion has been closed.