truncate td cell content (single line) based on th width property

touristtam

HI,

I have tried a couple of solution for getting the td cell content truncated based on the relative th width property, but I am struggling. Mind that I have only started to have a look at dataTables recently. I understand that I can do this on table initialization. But I need to keep this truncating action on sorting/filtering.

I have tried the following for reference:
- http://datatables.net/forums/discussion/8194/how-to-do-a-multi-line-text-trim-on-datatables-cell-contents/p1
- https://bitbucket.org/JustinP8/datatables.truncatecells

But I could not have either to behave as intended.

for the initialization of the dataTable I use the following:

[code]
$( '#report' ).dataTable({
'bAutoWidth': false,
'aaSorting': [[ 0, 'desc' ]],
'fnRowCallback': function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if( aData[8] === '1' ) {
nRow.className = 'resolved';
}

for( var i = 0; i < aData.length; i++ ) {
var th = $( nRow ).parents( 'table' ).find( 'th:eq(' + i + ')' )[0];
var td = $( 'td:eq(' + i + ')', nRow );
if( aData[i].length > $( th ).attr( 'text-trim' ) ) {
var str = aData[i].substring( 0, $( th ).attr( 'text-trim' ) - 4);
td.text( str );
}
}
}
});
});
[/code]

If you look at the above, I am doing a substring but I think it might be wrong as I am getting a pixel based mesure and using as a char length mesure

I have added the following css property for getting the overlapping text on one line:
[code]
table.sl-text-trim td {
/*width: 75px;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resolved {
background-color: greenyellow;
}
[/code]

finally my table code look like this. Mind this is a twig template, therefore the code foreign to html.
[code]



Created at
Category
Submitted By
Subject
Message
Referer
Issues
Forwarded
Action
Actions



{% for entity in entities %}

{{ entity.createdAt | date('Y-m-d') }}
{{ entity.category }}
{{ entity.user }}
{{ entity.subject }}
{{ entity.body }}
{{ entity.referer }}
{{ entity.issue }}
{{ entity.forwarded }}
{{ entity.action }}


{% endfor %}


[/code]