3

I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

in Datatables to cut the strings and display the full value in the html title. Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.

I saw jquery dotdotdot but it doesnt give me a click to extend.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Nico
  • 33
  • 1
  • 5

1 Answers1

8

Modifying strings in javascript in order to make them more viewable or "fitted" to certain DOM elements is a total no-go. Especially when you as here have many strings that is being preprocessed in a callback.

If you force fixed widths to some (or all) columns, example :

table.dataTable td:nth-child(3) {
  max-width: 100px;
}

Then you can use simple CSS to ensure that the content of the columns not is wrapped, not go beyond margins and displays a nice ellipsis if it is too large by 

table.dataTable td  {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

demo -> http://jsfiddle.net/ax1gr1og/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • 1
    That is of course a cleaner way to do what i already do. Can you also help me to do the click to expand/hide? Thanks – Nico Jul 13 '16 at 10:56
  • @Nico, I have to see your code. I guess you are referring to child rows? – davidkonrad Jul 13 '16 at 11:54
  • my code is very similar to your jsfiddle as i also use datatables. I am searching for something that when hovering over or clicking a td will expand the ellipsis to the actual text and break the design but also fix it again when unhovering/clicking again. – Nico Jul 13 '16 at 12:14
  • @Nico, Why not add the whole text as `title` attribute? `content` This is what I do. For columns with really long strings I cut off in CSS as above (the content is still there, but not visiible, important for indexing) but inserting the whole content as `title` attribute as well. If the default title / tooltip is ugly or not stylish enough you could use a bootstrap tooltip or similar. – davidkonrad Jul 13 '16 at 12:26
  • This is great - thanks very much - such a simple solution compared to everything else I've found online. Tested with DataTables and jQueryUI Resize and it looks great. – user1274820 Feb 22 '18 at 22:41