禁用一个DataTable行的CSS

Question

我有一个工作DataTable（我可以借助我之前的帖子来完成工作）。

它具有响应性，具有可扩展的功能：

正如您所看到的，分组行也有+，即使它没有展开。如何仅为此行禁用该功能？

以下是代码：

$(document).ready(function() {
    $('#datatable').DataTable({
        "ajax": "<?php echo base_url()."assets/files/data/data.txt"; ?>",
        "columns": [
            { "data": "etat" },
            { "data": "date" },
            { "data": "dest" },
            { "data": "message" },
            { "data": "exp" }
        ],
        "columnDefs": [
            { "visible": false, "targets": 1 }
        ],
        "order": [[ 0, "desc" ]],
        "responsive": true,
        drawCallback: function (settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="8" style="BACKGROUND-COLOR:rgb(212, 212, 212);font-weight:700;color:#1F1F1F;">' + 'Alarme du ' + group  + '</td></tr>'
                    );

                    last = group;
                }
            });
        });
    });
});

我正在使用这个CSS文件：

https://cdn.datatables.net/responsive/2.0.2/css/responsive.jqueryui.min.css

我在考虑只为这一行创建一个特定的类，但我不知道如何将它放到DataTable的特定行中。

Answer 1

使用以下CSS规则禁用(+)控制分组行。

/* Row group: Hide (+) control */
table.dataTable.dtr-inline.collapsed > tbody > tr.group > td:first-child::before, 
table.dataTable.dtr-inline.collapsed > tbody > tr.group > th:first-child::before {
  display:none;
}

/* Row group: Remove padding */
table.dataTable.dtr-inline.collapsed > tbody > tr.group > td:first-child, 
table.dataTable.dtr-inline.collapsed > tbody > tr.group > th:first-child {
  padding-left:5px;
}

请参阅this jsFiddle以获取代码和演示。