Datatables 1.10 “Check all” via jquery

2020-02-28 05:52发布

I know this might seem primitive, but I've been trying to implement it for a whole day, maybe because I can't fully comprehend how to use the API, I'm using DataTables 1.10.0, I have a table with pagination feature, each row has one checkbox in it, I need to have a "check all button" that would check all the checkboxes in all pages, the problem is that it only checks the checkboxes in the current page, and leaves the other pages unchecked, this is supposed to be easy, but I couldn't figure it out ! the answers I found use "fnGetNodes" which seems to be deprecated and not used by version 1.10

Edit: this is my markup

        <table class="table table-striped table-bordered table-hover" id="numbers_table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="checkall" title="Select all" onClick="toggle(this)"/></th>
                        <th>Number</th>
                        <th>Company</th>
                        <th>Tags</th>
                    </tr>
                </thead>
                <tbody>
                    <% _.each(array, function (value) { %>
                    <tr>
                        <td><input type='checkbox' name='numbers[]' value='<%=value.id%>'/></td>
                        <td><%= value.number %></td>
                        <td><%= value.company %></td>
                        <td><%= value.tags %></td>
                    </tr>
                    <% }) %>
                </tbody>
            </table>

    <button type="button" class="btn btn-primary" id="checkall2">SELECT ALL</button>

<script>

$(document).ready(function() {

    $('#numbers_table').dataTable({
        //"bPaginate": false,
        "aoColumnDefs": [
      { "bSortable": false, "aTargets": [ 0 ] }
    ] 
        });

    $("#checkall2").click(function() { // a button with checkall2 as its id
        $(':checkbox').prop('checked', true); // all checkboxes, you can narrow with a better selector
    });
});
</script>

4条回答
Animai°情兽
2楼-- · 2020-02-28 06:10

It really isn't that hard, but without seeing your markup I can only provide a generic example -

$('input[value="Check All"]').click(function() { // a button with Check All as its value
    $(':checkbox').prop('checked', true); // all checkboxes, you can narrow with a better selector
});
查看更多
祖国的老花朵
3楼-- · 2020-02-28 06:14

Try this code:

var table = $('#numbers_table').DataTable();

var cells = table
    .cells( ":checkbox" )
    .nodes();

$( cells ).prop('checked', true);

Source.

查看更多
相关推荐>>
4楼-- · 2020-02-28 06:25

if does not work try using api() keyword:

$('#YourCheckBoxId').on('click', function () {
    var rows = YourDatatableVariable.api().rows({ 'search': 'applied' }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
});
查看更多
做自己的国王
5楼-- · 2020-02-28 06:31

This should work for you

var table = $('#numbers_table').DataTable();

    $('#checkall').click(function () {
        $(':checkbox', table.rows().nodes()).prop('checked', this.checked);
    });
查看更多
登录 后发表回答