jquery – 数据表选择全部复选框

选择全部的演示并不真正有效.
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

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

解决方法

这应该适合你:
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了:

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,217) -1px -1px,217) 1px -1px,217) -1px 1px;
}

工作JSFiddle,希望有所帮助.

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...