DataTables更改所有頁面上的復選框

Question

我正在使用DataTables列出我的Web應用程序的每個頁面上顯示的“事件”。

對於每個頁面，我都有一個列，每個事件都是一行，每頁都有一個復選框。 （為了讓您了解它的樣子： http ： //i.stack.imgur.com/6QhsJ.png ）

當我點擊一個頁面時，它應該檢查所有復選框，但是只在DataTable的當前頁面上選中復選框。

任何幫助表示贊賞！

編輯：這是我的問題的JSFiddle（ https://jsfiddle.net/2n3dyLhh/2/ ）

HTML

<table id="eventsTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Checkbox<input type="checkbox" id="checkall"/></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><input type="checkbox" id="checkbox1"/></td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><input type="checkbox" id="checkbox2"/></td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td><input type="checkbox" id="checkbox3"/></td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td><input type="checkbox" id="checkbox4"/></td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td><input type="checkbox" id="checkbox5"/></td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td><input type="checkbox" id="checkbox6"/></td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td><input type="checkbox" id="checkbox7"/></td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td><input type="checkbox" id="checkbox8"/></td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td><input type="checkbox" id="checkbox9"/></td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td><input type="checkbox" id="checkbox10"/></td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td><input type="checkbox" id="checkbox11"/></td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td><input type="checkbox" id="checkbox12"/></td>
        </tr>
    </tbody>
</table>

JavaScript的

$(document).ready(function() {
    $.extend($.fn.dataTable.defaults, {
        "columns": [null, { "orderable": false }]
    });
    $('#eventsTable').DataTable();
});

$("#checkall").on('click', function() {
    if (this.checked) {
        for(var i = 1; i <= 12; i++) {
            var id = "#checkbox" + i;
            $(id).prop('checked', true);
        }
    } else {
        for(var i = 1; i <= 12; i++) {
            var id = "#checkbox" + i;
            $(id).prop('checked', false);
        }
    }
});

Answer 1

您的點擊處理程序應更改為：

$("#checkall").on('click', function () {
    $('#eventsTable').DataTable()
        .column(1)
        .nodes()
        .to$()
        .find('input[type=checkbox]')
        .prop('checked', this.checked);
});

有關代碼和演示，請參閱此示例 。

考慮使用jQuery DataTables復選框，以便更輕松地處理由jQuery DataTables提供支持的表中的復選框。

Answer 2

$("#chbox").click(function () {
    //chbox is main checkbox  
    var rows,checked;  
    var rows = $("#viewlist").dataTable().$('tr', {"filter": "applied"});// viewlist is
    checked = $(this).prop('checked');
    $.each(rows, function () {
        var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
    });
});