DataTables-如果所有行都有类,请执行此操作

时间:2018-08-17 18:14:53

标签: jquery datatables

我正在使用DataTables,并尝试实现自己的“检查/全选”输入。我的那部分工作正常,但是现在我试图在所有表行都具有“ selected”类时将“ check / select all”输入输入到“ prop(“ checked”),true”(这就是DataTables Select插件的工作方式) )。问题在于,这意味着所有行在第一次单击时都具有“选择的”类,这是不正确的。我不明白我在做什么错。 :(

<table id="table-general>
    <thead>
        <tr>
            <th>
                <input name="selectAll" type="checkbox" id="selectAll1" class="select-all">
                <label for="selectAll1"></label>
            </th>  
            <th></th>
            <th></th>
            <th></th>
         </tr>
    </thead>
    <tbody>
        <tr>
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="selected">
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="select-checkbox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>


$(function() {
    // DataTable for General
    let DT1 = $('#table-general').DataTable({
        "scrollY":        100,
        "scrollX":        true,
        "scrollCollapse": true,
        "fixedHeader":    true,
        "bInfo" :         false,
        scrollResize:     true,
        lengthChange:     false,
        searching:        false, 
        paging:           false,
        fixedColumns: {
            leftColumns: 1,
            rightColumns: 1
        },
        columnDefs: [ {
            className: 'select-checkbox',
            targets:   0
        }, {
            orderable: false,
            targets: [0,7]
        } ],
        select: {
            style:    'multi+shift',
            selector: 'td.cell-input'
        },
        order: [[ 1, 'asc' ]]
    });

    $("#selectAll1").on( "click", function(e) {
         if ($(this).is( ":checked" )) {
            DT1.rows(  ).select();
            $(this).prop("checked", true);         
        } else {
            DT1.rows(  ).deselect();
            $(this).prop("checked", false);
        }
    });

    $(".select-checkbox").on( "click", function(e) {
        if($(this).parent().hasClass("selected")) {
            $(".select-all").prop("checked", false);
        }
        else if ($(this).parent('tr').length === $(this).parent('tr.selected').length) {
            alert("TEST, ALL SAME CLASS SELECTED");
            $(".select-all").prop("checked", true);
        }
    });
 });

0 个答案:

没有答案