数据表全选复选框 [英] Datatables Select All Checkbox

问题描述

全选"演示无法正常工作. https://datatables.net/extensions/select/examples/initialisation/checkbox.html

The demo on the select all doesn't really work. https://datatables.net/extensions/select/examples/initialisation/checkbox.html

通过columnDef属性创建全选复选框后，实现全选复选框的最佳方法是什么?

What's the best way to implement the select all checkbox after they are created via the columnDef attributes?

推荐答案

这应该对您有用:

let example = $('#example').DataTable({
    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    }],
    select: {
        style: 'os',
        selector: 'td:first-child'
    },
    order: [
        [1, 'asc']
    ]
});
example.on("click", "th.select-checkbox", function() {
    if ($("th.select-checkbox").hasClass("selected")) {
        example.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
    } else {
        example.rows().select();
        $("th.select-checkbox").addClass("selected");
    }
}).on("select deselect", function() {
    ("Some selection or deselection going on")
    if (example.rows({
            selected: true
        }).count() !== example.rows().count()) {
        $("th.select-checkbox").removeClass("selected");
    } else {
        $("th.select-checkbox").addClass("selected");
    }
});

虽然我已经添加到CSS:

I've added to the CSS though:

table.dataTable tr th.select-checkbox.selected::after {
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}

正在工作 JSFiddle ，希望对您有所帮助.

Working JSFiddle, hope that helps.

这篇关于数据表全选复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！