Responsive Table With Ellipsis

Responsive Table With Ellipsis

DalderDalder Posts: 30Questions: 12Answers: 1

Hello,

Apologies, another question!

I'd like to use the ellipsis plugin to help limit the number of columns I have to collapse using the responsive extension.

However, if the ellipsis'd column does get collapsed, I would like the full, unshortened version of the data to be visible in the that reflowed data.

Here is an example of what happens currently: http://live.datatables.net/cadecise/3/edit

Is this easily achievable?

Thanks in advance,

Dan

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 3,006Questions: 87Answers: 421

    You can check whether a column is hidden by the responsive extension:
    https://datatables.net/reference/api/column().responsiveHidden()

    Something like this could work:

    table
        .on( 'responsive-resize', function () {
            var colsArray = table.columns().responsiveHidden().toArray();
            var hiddenColsArray = [];
            $.each(colsArray, function(key, value) {
                if ( ! value ) {
                    hiddenColsArray.push(key);
                }
            });        
        })
    

    This would give you an array of column indexes which are hidden by the responsive extension. I guess you'll figure out the rest :smile:

  • DalderDalder Posts: 30Questions: 12Answers: 1

    Thanks for the response, although I'm not entirely sure how that relates to my issue?

    In the meantime, I've come up with a workaround, although it's not particularly clever.

    All I've done is edit the return of the ellipsis renderer to do this:

    return '<span class="ellipsis-shortened" title="'+esc(d)+'">'+shortened+'&#8230;</span><span class="ellipsis-full">'+esc(d)+'</span>';
    

    and have added the following CSS:

    span.ellipsis-full {
        display: none;
    }
    
    span.dtr-data > span.ellipsis-shortened {
        display: none;
    }
    
    span.dtr-data > span.ellipsis-full {
        display: inline;
    }
    

    This does the trick, but it would be preferable to have a JS only fix so simplicity's sake.

    @Allan - sorry to tag you directly, is this something you've been asked about before?

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    Answer ✓

    This does the trick here - it's a tweak from this thread that I did this morning. It's using a custom renderer that allows you to define what tables goes into the child rows. Here, I'm using the raw data again, rather than the rendered data,

    Colin

Sign In or Register to comment.