Responsive Table With Ellipsis

Dalder

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

rf1234

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

Dalder

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?

colin

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