javascript - 为一个 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用于代码和演示。