checks all checkboxes in the DataTable including hidden rows

10,715

Try:

$("#selectallboxes").click(function () {
    var selected = new Array();
    $(otable.fnGetNodes()).find(':checkbox').each(function () {
        $this = $(this);
        $this.attr('checked', 'checked');
        selected.push($this.val());
    });
    // convert to a string
    var mystring = selected.join();
    alert(mystring);
});

.length gives you the length of the array. I've used join() to join the array into a string. DataTable's .fnGetNodes() gives you all the rows in the table including hidden ones.

Share:
10,715

Related videos on Youtube

Farhad
Author by

Farhad

Updated on June 16, 2022

Comments

  • Farhad
    Farhad over 1 year

    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:

    <div class="usersTable" id="userTable">
        <table cellpadding="0" cellspacing="0" id="customersList" >
            <thead>
                <tr>
                    <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th>
                    <th width="200">val1</th>
                    <th width="80px">val2</th>
                    <th width="70px">val3</th>
                    <th width="450">val4</th>
                    <th width="60px">val5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    

    Submit button:

    <input type='button' value='select all' id='selectallboxes' name='selectallboxes' />
    

    And the JQuery code that doesn't work:

    $(function () {         
        otable = $('#customersList').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ],
            "iDisplayLength": 100,
            "bProcessing": true,
            "bServerSide": true,
            "aaSorting":[],         
            "iDisplayStart": 0,
            "sAjaxSource": "filename",
            ....
    
    $("#selectallboxes").click ( function () {
            alert(dt.fnGetNodes().length + ' is total number')
            var selected = new Array();
            $('input', dt.fnGetNodes()).each( function() {
                    $(this).attr('checked','checked');
                    selected.push($(this).val());                       
            } );
             // convert to a string
            var mystring = selected.length;
            alert(mystring);
    })
    
  • Farhad
    Farhad over 10 years
    it doesn't work unfortunately. The result is the same with past.
  • David Barker
    David Barker over 10 years
    just spotted, you're putting the <input> in a <th> tag, they would need to be in <td>'s for ``fnGetNodes()` to pick them up
  • Farhad
    Farhad over 10 years
    I added this line to the frist line of my function in order to getting better result: alert(otable.fnGetNodes().length + ' is total row number') but this return the number of elements on the first page!
  • David Barker
    David Barker over 10 years
    Actually, it returns the total number of nodes in the <tbody> not just the nodes displayed, that's what that function does, you can run a check for $(this).is(':visible') to see if it is displayed or not.
  • Farhad
    Farhad over 10 years
    I guess because "bServerSide" is true,I have to handle it on server side. I think in this case all data doesn't fetch at first.
  • pkachhia
    pkachhia over 10 years
    +1 for your this line of code $(otable.fnGetNodes()).find(':checkbox').each, you save my day
  • James McCormack
    James McCormack over 9 years
    Since DataTables v1.10, $(otable.fnGetNodes()) should now be: $(otable.rows().nodes())

Related