CODEWITHSUNDEEP
jquerydatatablewebforms
Farhad
Farhad

Reputation: 205

checks all checkboxes in the DataTable including hidden rows

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);
})

Upvotes: 7

Views: 11027

Answers (4)

Vivek Tiwari
Vivek Tiwari

Reputation: 91

fnGetNodes() will give only the rows that are visible, there is an extension to get the hidden rows due to pagination fnGetHiddenNodes(), but that will work with jquery datatable version 1.9, there is update for the same in jquery datatable 1.10 but this is not working. You can store your data received from the ajax request in an array and then based on the condition of the checkbox click event re-draw the table with the data and input(checkbox) with selected attribute.

Upvotes: 0

David Barker
David Barker

Reputation: 14620

Ok, so this should be what you're after, this will find all the current page <tr>'s and cycle through them using dataTables _ API. You can change the filter to suit your needs to select different rows should you want to, this is all documented in the datatables documentation.

$("#selectallboxes").click ( function () 
{
    var selected = new Array();

    // Use the _ function instead to filter the rows to the visible
    var data = oTable._('tr', {"filter":"applied"});

    $.each(data, function(key, index)
    {
        var input = $(this).find('input[type="checkbox"]');

        input.attr('checked', 'checked');

        selected.push(input.val());
    });

    // convert to a string
    var mystring = selected.length;

    alert(mystring);
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try something like

$("#selectallboxes").click ( function () {
     var selected = [];
    $('input:checkbox', otable).each( function() {
        selected.push($(this).prop('checked', true).val());                       
    } );
    // convert to a string
    alert(selected.join());
})

Upvotes: 0

darshanags
darshanags

Reputation: 2519

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.

Upvotes: 10

Related Questions