How to hide a column only in responsive mode (when becomes row) if value = another cell value?

MickMan

Link to test case: can't link because of private data
Description of problem: Hi everyone, i'm a newbie with datatables and javascript, but i was able to make my customer happy because of the forum help.
I've been able to solve problems searching for a solution, but right now i have a (small?) issue that i'm not able to solve.

I have a table that use a workaround to show "child rows" (even on desktop mode) to group infos.
Sadly i can't use the row group function for this, as i did for other tables, due to the json format.

The workaround consists in reporting a (almost hidden) value in the json, so the table can group "children" of the same "parent".

Problem comes when in responsive mode the column becomes a row that is empty (even if it is not, actually) and i'd like to hidden the entire row.

I can't always hidden the column because sometimes it shows needed info.
The row must be hidden only when the info in the cell is the first 12 numbers of the first column.
I used substring function to retain these 12 digits to create a search link, but i can't figure out how to remove the row (and if is possible).

I think i should use an if statement, but i'm not good enough.

Do you holy gurus have some tip to share with me? Bear in mind i'm not an expert at all.
I can't link to a test case, but i can share the code and post pictures.

Desktop View

Mobile View

$('tfoot > tr').hide();

    // Setup - add a text input to each footer cell

        /* Custom filtering function which will search data in columns */

        function filterColumn ( i ) {
            $('#webapp').DataTable().column( i ).search(
                $('#col'+i+'_filter').val(),
                $('#col'+i+'_smart').prop('checked')
            ).draw();
        }

        $(document).ready(function() {
            $('#webapp').DataTable();

            $('input.global_filter').on( 'keyup click', function () {
                filterGlobal();
            } );

            $('input.column_filter').on( 'keyup click', function () {
                filterColumn( $(this).parents('td').attr('data-column') );
            } );
} );



    // DataTable
        $.fn.dataTable.ext.errMode = 'none';
    var table = $('#webapp').DataTable(
            {
                "ordering": false,
                    dom: '<"top"<"div-no-mobile"f><"div-only-mobile"pf><"clear">>rt<"bottom"<"div-no-mobile"Bip><"div-only-mobile"Bi><"clear">>',
        responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: '',
    renderer: function(api, rowIdx, columns) {
            var data = $.map(columns, function(col, i) {
                    if (col.hidden) {
                            if (col.data) {
                                    return '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                            '<td><b>' + col.title + ':' + '</b></td> ' +
                                            '<td>' + col.data + '</td>' +
                                            '</tr>'
                            }
                    }
            }).join('');
            return data ? $('<table/>').append(data) : false;
    }
        }
    },

        "ajaxSource": "*source*",
        "columnDefs": [
            { "visible": false, "targets": 0 },
                        {"targets": 1,
                    "data": "ISIN",
                    "render": function ( data, type, row, meta ) {
                      return '<a href="https://link.com?cerca='+data.substr( 0, 12 )+'" target="_blank"> '+data+' </a>';
                    }
                    }
        ],
                "displayLength": 9999,
                "columns": [
                    { "data": "KeyID" },
                    { "data": "ISIN" },
                    { "data": "Sottostante", "width": "10%" },
                    { "data": "Strike" },
                    { "data": "Last" },
                    { "data": "Performance" },
                    { "data": "Coupon" },
                    { "data": "Capitale" },
                    { "data": "AltreInfo", "width": "25%" },
                    { "data": "Scheda" }
                  ],

         "scrollY": "72vh",
         "scrollCollapse": true,
            initComplete: function () {
          
            // Apply the search
            this.api().columns().every( function () {
                var that = this;

                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });
} );
</script>

<div class="container">
<table id="webapp" class="display responsive row-border hover order-column" style="width:100%; height:100%">
<thead>
<th>KeyID</th>
<th>ISIN</th>
<th>Sottostante</th>
<th>Strike</th>
<th>Last</th>
<th>Perf.</th>
<th>Coupon</th>
<th>Capitale</th>
<th>Altre informazioni</th>
<th>Valutazione</th>
</thead>
<tfoot>
 <tr>
     <th>KeyID</th>
     <th>ISIN</th>
     <th>Sottostante</th>
     <th>Strike</th>
     <th>Last</th>
     <th>Perf.</th>
     <th>Coupon</th>
     <th>Capitale</th>
     <th>Altre informazioni</th>
     <th>Valutazione</th>
 </tr>
</tfoot>
</table>
</div>

Thanks in advance and sorry for my english.
Michele

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

MickMan

Hi Colin, thank you for your advice.
Too bad i can't reproduce a test case. I tried, but failed.
My ignorance, of course, but even copying the code doesn't work.
Probably is because of the dynamic data source that i'm unable to reproduce?

I 'just' need a piece of code that
"check if column data = another column data, then hide row in mobile view".

MickMan

Don't get mad at this... I opted for an easier solution.
Avoiding the column to be translated in a row, giving the header priority=1.

<th data-priority="1">Altre informazioni</th>

Problem solved without the solution.

Thread can be closed.
Thanks