Ellipsis renderer that can expand column to show full text

Ellipsis renderer that can expand column to show full text

YoDavishYoDavish Posts: 123Questions: 46Answers: 3

Is there somthing similiar to ellipsis renderer for long text columns that if we click into the column that would expand the column to display the full text?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,230Questions: 26Answers: 4,755
    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

  • colincolin Posts: 15,141Questions: 1Answers: 2,586

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

    Colin

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @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>');
                };
            };
    
  • kthorngrenkthorngren Posts: 20,230Questions: 26Answers: 4,755

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

    Kevin

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @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.

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    nvm figured it out too. Thanks for you help!

  • kthorngrenkthorngren Posts: 20,230Questions: 26Answers: 4,755

    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

Sign In or Register to comment.