Can we add custom title attribute to td of each row with its text and we can also add ellipses to td
Can we add custom title attribute to td of each row with its text and we can also add ellipses to td
gtbhopale
Posts: 4Questions: 1Answers: 0
I have tried below code:
$('#fixed-table').DataTable({
data: responseDetails,
searching: false,
ordering: false,
lengthChange: false,
'createdRow': function (row, data, rowIndex) {
// Per-cell function to do whatever needed with cells
$.each($('td', row), function (colIndex) {
// For example, adding data-* attributes to the cell
$(this).attr('title', $(this).text());
});
},
columns: [
{ data: 'userName' },
{ data: 'complatedDate' },
{ data: 'businessUnitList' },
{ data: 'countryGeograpyList' },
{ data: 'prismRole' },
{ data: 'bandLevel' },
{ data: 'video1' },
{ data: 'video2' },
{ data: 'video3' },
{ data: 'overAll' },
{ data: 'response1' },
{ data: 'response2' },
{ data: 'response3' }
],
columnDefs: [ {
targets: 10,
render: function ( data, type, row ) {
return type === 'display' && data.length > 10 ?
data.substr( 0, 15) + '…' :
data;
}
},{
targets: 11,
render: function ( data, type, row ) {
return type === 'display' && data.length > 10 ?
data.substr( 0, 15) + '…' :
data;
}
},
{
targets: 12,
render: function ( data, type, row ) {
return type === 'display' && data.length > 10 ?
data.substr( 0, 15) + '…' :
data;
}
} ]
});
But the text of each td is truncating/ellipsing first and then title attribute is get added which show the trucated text in tooltip not the whole text.
help will be appreciated.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The second parameter to
createdRowis the raw data for the row - you can use that instead of$(this).text(),Colin
Thanks, Colin for your reply. My major concern is the default title tooltip getting text which having ellipse. I don't want ellipses in default title tooltip on hover of td. I wanted a full text in tooltip without ellipses.
You can find the issue in the below screenshot.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hi Colin, you can find the below jsFiddle link where I have tried to reproduce the issue
https://jsfiddle.net/z5khcn01/2/
In this fiddle, you will find the th12 column having a large amount of data, which has ellipses. And when you hover the mouse on it , it is showing only the ellipses text, not the all full data.
Let me know if more information is needed.
Thanks.
As Colin said use the second parameter,
data, of thecreatedRowfunction to build your title. For example:https://jsfiddle.net/93w5d6ye/
Kevin
Thanks Guys.It is working fine.