Clickable truncate JS

cha59

For whom it may interest
If you are having the same issue as me with a lot of data for a column, that you need to check some times, but not want to show at all times, this code might help you. Truncate is here clickable - on/off.

$(".truncate").on("click", function() {
                var index = $(this).index() + 1;
                $('table tr td:nth-child(' + index  + ')').toggleClass("truncate");
            });

code for CSS:

.truncate {
    max-width:80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

Best regards
Claus

colin

Thanks for sharing, I'm sure that'll be helpful for others. Here it is in action.

Colin

cha59

Hi Colin
Thank you - I'll pass it on to my son, Peter. He made the code. It was THE answer to a lot of my troubles - too much data in a column, that I needed to check from time to time, but showing it all the time would ruin the layout of the tabel.
Best regards
Claus

cha59

Hi Colin again
I should add, that I use the code on a table without pagination. It doesn't work on pagination 2, 3, 4, and so on. It only works if all rows are shown.
Best regards
Claus

kthorngren

You need to use jQuery event delegation. The .truncate class is only in the DOM on the page being displayed. The other pages aren't available to add the click handlers to. Using event delegation is a key when using Datatables. Here is the updated code that works with pagination:
http://live.datatables.net/yojadaba/2/edit

Kevin