Answers

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2023 Answer ✓

  I don't believe anything exists to do this. However it looks like the ellipsis renderer could be updated to look at flag variable to decided whether to display the full data or the shortened data. Maybe something like this:

      return function (d, type, row) {
          // Order, search and type get the original data
          if (type !== 'display') {
              return d;
          }
          if ( ! ellipsisFlag ) {
            return d;
          }
  

  Then use an event handler, depending on what you want to click, to toggle the ellipsisFlag flag. Will need to call rows().invalidate() and draw() in the event handler to have Datatables redraw the table. Something like this:
  https://live.datatables.net/secomafe/1/edit

  Kevin
• colin Posts: 15,177Questions: 1Answers: 2,590

  March 2023

  Just a quick note to say this example from this thread is similar, but you click on each record to expand the ellipses.

  Colin
• YoDavish Posts: 123Questions: 46Answers: 3

  March 2023

  @kthorngren and @colin Thanks, I've gotten to work almost exactly how I want it. I put in an achor tag into the row that triggers the toggle. One last puzzle is how can it get to be only row specific, currently it will toggle all rows, this is the main function here:

      $.fn.dataTable.render.ellipsis = function (cutoff, wordbreak, escapeHtml) {
              var esc = function (t) {
                  return ('' + t)
                      .replace(/&/g, '&')
                      .replace(/</g, '&lt;')
                      .replace(/>/g, '&gt;')
                      .replace(/"/g, '&quot;');
              };
              return function (d, type, row) {
                  // Order, search and type get the original data
                  if (type !== 'display') {
                      return d;
                  }
                  if ( ! ellipsisFlag ) {
                      if (d == null) return d;
                      return d + '<a href=# onclick=\'toggleShowMore();\'>Show Less</a>';
                  }
                  if (typeof d !== 'number' && typeof d !== 'string') {
                      if (escapeHtml) {
                          return esc(d);
                      }
                      return d;
                  }
                  d = d.toString(); // cast numbers
                  if (d.length <= cutoff) {
                      if (escapeHtml) {
                          return esc(d);
                      }
                      return d;
                  }
                  var shortened = d.substr(0, cutoff - 1);
                  // Find the last white space character in the string
                  if (wordbreak) {
                      shortened = shortened.replace(/\s([^\s]*)$/, '');
                  }
                  // Protect against uncontrolled HTML input
                  if (escapeHtml) {
                      shortened = esc(shortened);
                  }
                  return ('<span class="ellipsis" title="' +
                      esc(d) +
                      '">' +
                      shortened + 
                      '&#8230;</span><a href=# onclick=\'toggleShowMore();\'>Show more</a>');
              };
          };
  
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2023

  Did you see Colin's example and thread he linked to? That should get you started.

  Kevin
• YoDavish Posts: 123Questions: 46Answers: 3

  March 2023

  @kthorngren Yep, I figured it out and got it to work now, however, another issue pop up though. When I enabled server side. I no longer can toggle per row, it will toggle for all rows again.
• YoDavish Posts: 123Questions: 46Answers: 3

  March 2023

  nvm figured it out too. Thanks for you help!
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2023

  We will need to see the problem to help debug. Please provide a link to your page or a test case replicating the issue so we can take a look. You can use one of the server side processing templates from here:
  https://datatables.net/manual/tech-notes/9#Server-side-processing

  Kevin