Replies

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

  January 6

  Does the Ellipsis plugin do what you want?

  Kevin
• arnorbld Posts: 110Questions: 20Answers: 1

  January 7

  Hi,

  Will check it out. Since the text has to be able to span multiple lines, I'm not sure if the browser tooltip can do that. Kind of like this:

  Line 1
  Line 2
  Line 3
  

  etc. If it CAN, then this looks like the perfect solution

  Will check it later and let you know.
• colin Posts: 15,177Questions: 1Answers: 2,590

  January 8

  This example here should hopefully get you going. It's combining the ellipsis plugin that Kevin mentioned, with rowCallback to expand them with a tooltip on hover. You could change the ellipsis code to break on the first instead.

      columnDefs: [
        {
          targets: 1,
          render: function(data, type, row) {
            if ( type === 'display') {
              return renderedData = $.fn.dataTable.render.ellipsis(10)(data, type, row);            
            }
            return data;
          }
        }
      ],
      rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
        $(row).find('td:eq(1)').attr('title', data[1])      
      }
  

  Colin
• arnorbld Posts: 110Questions: 20Answers: 1

  January 8

  Hi Colin,

  Thank you. I'll see what I can find out.
• arnorbld Posts: 110Questions: 20Answers: 1

  January 8

  Hi Colin,

  With the example I modified the code slightly to show "Test<br>" before the data in the title:

          render: function(data, type, row) {
            if ( type === 'display') {
              return renderedData = $.fn.dataTable.render.ellipsis(20)('Test<br>' + data, type, row);            
            }
            return data;
          }
  

  This does not display right in the tooltip, where it shows with the <br> tag:

  

  However, if I put in the JS CR (\r) it works and breaks on the \r
  

  I think that will do for now. I can look at more elaborate options later!
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 9

  That is correct - be default the ellipsis renderer will escape HTML to help protect against XSS attacks from unsanatised HTML.

  You can pass false as the third argument to the render if you don't what that behaviour:

  return renderedData = $.fn.dataTable.render.ellipsis(20, true, false)('Test<br>' + data, type, row);
  

  Allan