Disable CSS for one DataTable row

Question

I have a working DataTable (that I could make work with the help of my previous posts here).

screenshot

It is responsive, with an expandable feature:

screenshot

The thing is, as you can see, the grouping row has a + too, even if it doesn't expand. How can I disable that only for this row?

Here is the code:

$(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;
                }
            });
        });
    });
});

And I'm using this CSS file:

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

I was thinking of creating a specific class only for this row, but I don't know how to put that into the specific row in the DataTable.

I tried but I don't know how to remove a Class since in the CSS it's : table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before — Komarzer
– Komarzer, Commented Mar 11, 2016 at 17:01
How could you expect to remove a class that doesn't exist? Maybe change the CSS to be a class instead of a pseudo selector? I'm not sure what DataTables is capable of when dealing with CSS selectors. — Waxi
– Waxi, Commented Mar 11, 2016 at 17:56

Gyrocode.com · Accepted Answer · 2016-03-13 14:36:23Z

1

Use the following CSS rules to disable (+) control for grouping row.

/* 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;
}

See this jsFiddle for code and demonstration.

answered Mar 13, 2016 at 14:36

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable CSS for one DataTable row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related