DataTables how to cut string and add (…) and put t

Question

I use fine DataTables for my website.

In a few rows it can happens that the string is very very long (e.g. 500 to 1000 chars).

How to cut that at 20 signs, add "..." and put that in a tooltip?

(of course I know substring and know how to add a tooltip, I just want to know if there is a feature / option for me on datatables or on which event I can get the data and cut it and add a tooltip to the cell)

Answer 1

I know that the question is already answered, but i would like to add this datatable plugin as an option for this exactly problem. There's a very good explanation of how it works and how to use it in this blog post.

It's very simple to use, suppose that you need the text to get cut and only show 20 characters, you can use like this:

$("#yourTableSelector").dataTable({
    ... // other configurations
    columnDefs: [{
        targets: 0, // the target for this configuration, 0 it's the first column
        render: $.fn.dataTable.render.ellipsis(20)
    }]

});

Just to clarify, this plugins requires DataTables 1.10+

Answer 2

I don't know of a pure DataTables solution but this can be achieved by a setting fixed column width (via CSS or DataTables options) combined with text-overflow: ellipsis on your table cells.

For text-overflow to work you also need to specify a fixed width, set overflow: hidden and white-space: nowrap:

.limited{
    white-space: nowrap;
    width: 100%;                   
    overflow: hidden;
    text-overflow: ellipsis;
}

To see the full cell content add it to the cell's title attribute:

<td class='limited' 
  title='Very long cell content which is to long for the cell but shown as a tooltip'>
  Very long cell content which is to long for the cell but shown as a tooltip
</td>

Which could look something like this:

See the MDN article on text-overflow for more details.

---

Another option would be using DataTables orthogonal data feature. In contrast to just using substring to limit the cell content, this would allow you to keep the complete cell content searchable:

<td data-search='Very long cell content which is to long for the cell but shown as a tooltip' 
   title='Very long cell content which is to long for the cell but shown as a tooltip'>
   Very long cell content...
</td>

The output would be the same es above.