Default responsive symbols in extra column

schwaluck

Hello everybody,

I have a table in which I would like to use the Responsive function and in such a way that the plus or minus symbol is displayed in column 0.
For the symbols I have deposited own pictures.
My problem is that the pictures are not displayed and nothing happens when clicking on the area in column 0.

I have already took a look on this example: https://datatables.net/examples/api/row_details.html

In the following you will find the current code excerpts of the js and css:

JS:

    var table = $('#table_test').DataTable( {
        dom: 'Bfrtilp',
        processing: true,
        serverSide: false,
        responsive: {
            details: {
                type: 'column',
                target: 0
            }
...
        },
    columnDefs: [
      {
        className: 'dtr-control',
        orderable: false,
        targets: 0
      },
        ],
...
    columns: [
        {
                 "className": 'details-control',
                 "orderable": false,
                 "data": null,
                 "defaultContent": ''
        },
                ...
        ]
    ...
    } );
    table.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

CSS:

td.details-control {
    background: url("https://test.de/assets/Pictures/plus_symbol.png") no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url("https://etest.de/assets/Pictures/minus_symbol.png") no-repeat center center;
}

Does somebody have an idea what the problem could be?

schwaluck

Update: There was a typo in the URL (etest should be test). However thats not the problem!

CSS:

td.details-control {
    background: url("https://test.de/assets/Pictures/plus_symbol.png") no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url("https://test.de/assets/Pictures/minus_symbol.png") no-repeat center center;
}

kthorngren

The Responsive extension and Child Row Details are two separate solutions with their own icons. In order to use both you will need to configure the Responsive extension to display as a modal like this example. See the Child Rows/Responsive notes in the Compatibility Maatrix.

The td.details-control and tr.shown td.details-control CSS you show are only for the Child Row Details solution. See this thread for information of how to change the Responsive icons.

It would be difficult to get both sets of icons to show in the same column and to use the same column for both functions. If you still need help with this please build an example showing what you are trying to do so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

schwaluck

Hi Kevin,

thanks for the info! I will check it out and get back on you with a test case if I do not get it running!