Answers

• toishibekov Posts: 5Questions: 1Answers: 0

  July 2018

  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 Posts: 79Questions: 4Answers: 12

  July 2018

  where is the code that produces the detail rows?
• toishibekov Posts: 5Questions: 1Answers: 0

  July 2018 edited July 2018

  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 Posts: 15,240Questions: 1Answers: 2,599

  July 2018 Answer ✓

  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 Posts: 5Questions: 1Answers: 0

  July 2018

  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 Posts: 5Questions: 1Answers: 0

  July 2018

  Thank you, Colin, for the solution. Now It works great
• LaRichy Posts: 17Questions: 4Answers: 0

  April 2019

  Can you paste the solution here?
• LaRichy Posts: 17Questions: 4Answers: 0

  April 2019

  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