Remove child rows with no data (empty)

toishibekov

Hi everyone! I have a responsive datatable
I want to remove all child rows with no data. Please help

toishibekov

this is my code:
$(document).ready(function() { $('#example').DataTable( { responsive: true, columnDefs: [ { targets:"_all", orderable: false }, { targets:[0,1,2,3,4], className: "desktop" }, { targets:[5], className: "mobile" } ], pageLength: 5, lengthChange: false, "aoColumnDefs": [ { "bSortable": true, "aTargets": [ "_all" ] } ], } ); } );

Bindrid2

where is the code that produces the detail rows?

toishibekov

the code that produces the detail rows:

    details: {
        renderer: function ( api, rowIdx ) {
            var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
                var header = $( api.column( cell.column ).header() );
                var idx = api.cell( cell ).index();

                if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
                    return '';
                }

                // Use a non-public DT API method to render the data for display
                // This needs to be updated when DT adds a suitable method for
                // this type of data retrieval
                var dtPrivate = api.settings()[0];
                var cellData = dtPrivate.oApi._fnGetCellData(
                    dtPrivate, idx.row, idx.column, 'display'
                );
                var title = header.text();
                if ( title ) {
                    title = title + ':';
                }

                return '<li class="turnir" data-dtr-index="'+idx.column+'">'+
                        '<span class="dtr-title">'+
                            title+
                        '</span> '+
                        '<span class="dtr-data" id="poin">'+
                            cellData+
                        '</span>'+
                    '</li>';
            } ).toArray().join('');

            return data ?
                $('<ul class="topnav" data-dtr-index="'+rowIdx+'"/>').append( data ) :
                false;
        },

colin

The best bet with "I want to remove all child rows with no data" is to not create those rows to begin with. So in that function that creates the child rows, just skip those without data...

toishibekov

How can I skip the data without data. I need the code something like this:
$("span.dtr-data:empty").parent().hide();

<li class="turnir" data-dtr-index="6"> <span class="dtr-title">Expences1:</span> <span class="dtr-data"></span> </li>

toishibekov

Thank you, Colin, for the solution. Now It works great

LaRichy

Can you paste the solution here?

LaRichy

Made it myself:

responsive: {
    details: {
        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;
        }
    }
},

Tnx to @kthorngren here!

Sharing it here for anyone else