Geek asks and answers

Validates all checkboxes in a DataTable, including hidden rows

I am trying to make a function that checks all the checkboxes in a DataTable, including hidden strings. 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 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);
})
+5
source share
4 answers

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

.lengthgives the length of the array. I used join()to combine the array into a string. The DataTable .fnGetNodes()gives you all the rows in the table, including hidden ones.

+8
source

, , , <tr> dataTables _ API. , , , .

$("#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);
});
0

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());
})
0
source

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

0
source

More articles:


All Articles