lundi 23 octobre 2017

Datatable.js uncheck all checkbox [duplicate]

How to clear all the checked checkboxes when clicking on the button.

I am using datatable.js to draw a table, where i have checkbox for each row, in the same page i have another div portion when i have my reset button, when i click on the reset button, i expect the check boxes selected in datatable must be cleared. For this i tried various cod snippets but it does not works. My data table id is "example"

HTML dataTable code:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Machine Id</th>
                <th>Machine Name</th>
            </tr>
        </thead>
        <tbody style="color: black">
            <tr>
                <td></td>
                <td>1</td>
                <td>Tiger Nixon</td>
            </tr>
            <tr>
                <td></td>
                <td>1</td>
                <td>Garrett Winters</td>
            </tr>
        </tbody>
</table>

Javascript for dataTable:

$(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[15, 20], [15, 20]],
        columnDefs: [ {
             orderable: false,
             className: 'select-checkbox',
             targets:   0
        } ],
        select: {
            'style': 'multi',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );



 $('#example tbody input[type="checkbox"]').prop('checked', false);
    $('#example tbody td.select-checkbox').prop('checked', false);
    $('.select-checkbox').removeAttr('checked');
    $('#example tbody input[type="checkbox"]').removeAttr('checked');
    $('#example tbody td.select-checkbox').removeAttr('checked');
    // Get all rows with search applied
    var rows = $("#example").rows({ 'search': 'applied' }).nodes();
    // Check/uncheck checkboxes for all rows in the table
    $('input[type="checkbox"]', rows).prop('checked', this.checked);

When a check box is selected, it looks as

<tr role="row" class="even selected">
                <td class=" select-checkbox"></td>
                <td class="sorting_1">1</td>
                <td>Garrett Winters</td>
            </tr>

If it is not selected

<tr role="row" class="odd">
                <td class=" select-checkbox"></td>
                <td class="sorting_1">1</td>
                <td>Ashton Cox</td>
            </tr>




Aucun commentaire:

Enregistrer un commentaire