How can you select specific number of checkboxes on datatable by getting that number from input field

Viewed 25

I am trying to type a number in input field and I want that number to be the checkboxes to be ticked on my table. It seems working on a table without datatable plugin but on datatable doesn't, it ticks checkboxes of the first pagination only.

$(document).ready(function () {
    var table = $('table').DataTable({
        'paging': true,
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'info': true,
        'autoWidth': true
    })
    $('#select_button').click(function () {
        var chck_val = $('#checking').val();
        $(":checkbox:lt(" + chck_val + ")").prop("checked", true);
    })
});



<input type="text" id="checking" /><button id="select_button">select</button>
    <br>
    <table class="table table-hover dataTable">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td><a>Enhancement</a></td>
                <td class="sorting_1">12/02/2018</td>
                <td class="sorting_1">12/02/2018</td>
                <td><span>Waiting</span></td>
            </tr>
        </tbody>
    </table>
1 Answers

You have to trigger button click event when datatable's paging state changes.

$("#select_button").trigger("click");  

Example:

$('#YourTableID').on( 'page.dt', function () { // In your case you indicate direct table so it's only "table" 
   $("#select_button").trigger("click");   
});
Related