首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >“数据”选中“全部”复选框

“数据”选中“全部”复选框
EN

Stack Overflow用户
提问于 2017-03-03 04:05:19
回答 6查看 162.1K关注 0票数 31

select all上的演示并不真正有效。https://datatables.net/extensions/select/examples/initialisation/checkbox.html

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

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2017-03-03 13:23:56

这应该适用于你:

代码语言:javascript
复制
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中了:

代码语言:javascript
复制
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,希望这会有所帮助。

票数 38
EN

Stack Overflow用户

发布于 2017-07-01 19:29:30

您可以对复选框数据对象使用jQuery扩展。

代码语言:javascript
复制
var table = $('#example').DataTable({
   'ajax': 'https://api.myjson.com/bins/1us28',
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
   'select': {
      'style': 'multi'
   },
   'order': [[1, 'asc']]
});

有关代码和演示,请参见这个例子

有关更多的例子文档,请参见更多的例子项目页面。

票数 25
EN

Stack Overflow用户

发布于 2018-04-05 08:57:54

您可以使用按钮使用这个选项 dataTable 本身提供的

代码语言:javascript
复制
dom: 'Bfrtip',
 buttons: [
      'selectAll',
      'selectNone'
 ]'

下面是一个示例代码

代码语言:javascript
复制
var tableFaculty = $('#tableFaculty').DataTable({
    "columns": [
        {
            data: function (row, type, set) {
                return '';
            }
        },
        {data: "NAME"}
    ],
    "columnDefs": [
        {
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }
    ],
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    dom: 'Bfrtip',
    buttons: [
        'selectAll',
        'selectNone'
    ],
    "order": [[0, 'desc']]
});
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42570465

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档