Answers

• rf1234 Posts: 2,990Questions: 87Answers: 421

  March 2022

  You can check whether a column is hidden by the responsive extension:
  https://datatables.net/reference/api/column().responsiveHidden()

  Something like this could work:

  table
      .on( 'responsive-resize', function () {
          var colsArray = table.columns().responsiveHidden().toArray();
          var hiddenColsArray = [];
          $.each(colsArray, function(key, value) {
              if ( ! value ) {
                  hiddenColsArray.push(key);
              }
          });        
      })
  

  This would give you an array of column indexes which are hidden by the responsive extension. I guess you'll figure out the rest
• Dalder Posts: 30Questions: 12Answers: 1

  March 2022

  Thanks for the response, although I'm not entirely sure how that relates to my issue?

  In the meantime, I've come up with a workaround, although it's not particularly clever.

  All I've done is edit the return of the ellipsis renderer to do this:

  return '<span class="ellipsis-shortened" title="'+esc(d)+'">'+shortened+'&#8230;</span><span class="ellipsis-full">'+esc(d)+'</span>';
  

  and have added the following CSS:

  span.ellipsis-full {
      display: none;
  }
  
  span.dtr-data > span.ellipsis-shortened {
      display: none;
  }
  
  span.dtr-data > span.ellipsis-full {
      display: inline;
  }
  

  This does the trick, but it would be preferable to have a JS only fix so simplicity's sake.

  @Allan - sorry to tag you directly, is this something you've been asked about before?
• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2022 Answer ✓

  This does the trick here - it's a tweak from this thread that I did this morning. It's using a custom renderer that allows you to define what tables goes into the child rows. Here, I'm using the raw data again, rather than the rendered data,

  Colin