render ellipsis and return data without using substring

katzmoye

I have something like this:

      "targets": findWithAttr(columnArr, "comment_text"),
        "render": function( data, type, row ) {
                 return '<div class="my_text">' + data + '</div>';
      }

and i want to render an ellipsis on the displayed data (text). If I use the substr method:

return type === 'display' && data.length > 150 ? '<div class="my_text">' + data.substr(0, 150) + '...' + '</div>' : '<div class="my_text">' + data + '</div>';

it returns truncated text which I cannot use.

I'd prefer to use the ellipsis plugin ($.fn.dataTable.render.ellipsis(150, true)) - is it possible?

colin

Hi @katzmoye ,

This example here shows the Eliipses plugin in action. Hope that does the trick,

Cheers,

Colin

katzmoye

That is super elegant, and renders great, but unfortunately doesn't do what I need it to do which is, ultimately, send the entire text string to 'my_text' which has a function that matches the data string against another text. In other words, i'd love for it to display the rendered ellipsis but the full data string needs to go to 'my_text'.

Hope that makes sense.

colin

Hi @katzmoye ,

I don't quite follow, but this example here shows how you can use cell().render() to get the full string. If that's no good, could you explain a little more please,

Cheers,

Colin

katzmoye

Sorry, I'm still very new and I very much appreciate the help!

I have a button on the page (not in the DT) that, when clicked, looks at each row in the datatable and compares the value in returned data to a larger text. If it finds a match between the datatable value and the larger text it highlights the matching text within the larger text.

Some of the datatables data are very long text in a tight space, so I'd like to render with the ellipsis. However, using
return type === 'display' && data.length > 150 ? '<div class="my_text">' + data.substr(0, 150) + '...' + '</div>' : '<div class="my_text">' + data + '</div>';
will return the truncated text with the three dots as the data, and no match will be found in the larger text using the function(s).

Ideally, the text in the datatables would display as truncated + "..." but would return the entire text. Your example above is great for display but when i console log data it returns nothing.

I hope this makes more sense!

LesF

If you make the div containing the text a fixed size you could use CSS, as in: text-overflow: ellipsis;

The full data will be retained but the display will be truncated.
See https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

colin

Hi @katzmoye ,

Yep, if you look at this example here, this will do what you want. cell().render() returns the original text, so you would use that for your comparison,

Cheers,

Colin