Clickable truncate JS

Clickable truncate JS

cha59cha59 Posts: 87Questions: 23Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • cha59cha59 Posts: 87Questions: 23Answers: 0

    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

  • cha59cha59 Posts: 87Questions: 23Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

This discussion has been closed.