How do i make use of ellipses when the row value is more than expected?

vaishnavkoka

I want to display the path value in datatable but the column size always gets extended, i do not want to use no-wrap as it would increase the size of row( width of each row), i want to hide rest of the value and that hidden value should be displayed on mousehover(when ever a mouse is pointed on that value),
I would like to know is there any way to achieve this ?
Below is the sample code:
http://live.datatables.net/yozamuto/3/edit

Thanks
Koka

colin

Hi @vaishnavkoka ,

See this your modified example here, this does what you're after. The ellipsis render makes tooltips for the long string by default,

Cheers,

Colin

vaishnavkoka

Hi Colin
Thanks for the response but i am already using one columndef for some other purpose, now it doesnt allows me to use one more columndef, here is my existing columndef code

columnDefs: [
          {
            targets: [1,2], 
            render: function (data, type, row, meta) {
              if (type === 'display') {
                var label = 'label-success';
                if (data === 'failed') {
                  label = 'label-danger';
                } else if (data === 'running') {
                  label = 'label-success';
                }else if (data === 'halted') {
                    label = 'label-warning';
                }
                return '<span class="label ' + label + '">' + data + '</span>';
              }
              return data;
              
            }
          }]

colin

Looking at this page here, which describes the label tag - it looks like your usage is wrong.

In your case, you're going to get something like:

<span class="label label-running'"> running</span>

which looks wrong to me,

C

vaishnavkoka

Hi Colin,

Label is was a variable name, i still changed the code to this, but i am unable to find out reason which halting the ellipses
columnDefs: [
{
targets: [1,2],
render: function (data, type, row, meta) {
if (type === 'display') {
var btn = 'btn-success btn-xs';
if (data === 'failed') {
btn = 'btn-danger btn-xs';
} else if (data === 'running') {
btn = 'btn-success btn-xs';
}else if (data === 'halted') {
btn = 'btn-warning btn-xs';
}
return '<span class="' + btn + '">' + data + '</span>';
}
return data;

        }
      }]

colin

You're not calling the ellipses render! If you look at the example I sent, it's calling $.fn.dataTable.render.ellipsis() to generate the ellipses, that's entirely missing from your code.

vaishnavkoka

Yeah that's because it would remove the bootstrap button classes , before using renderer here is my code:

columnDefs: [
          {
            targets: [1,2],
            render: function (data, type, row, meta) {
              if (type === 'display') {
                var btn = 'btn-success btn-xs';
                if (data === 'failed') {
                  btn = 'btn-danger btn-xs';
                } else if (data === 'running') {
                  btn = 'btn-success btn-xs';
                }else if (data === 'halted') {
                    btn = 'btn-warning btn-xs';
                }
                return '<span class="' + btn + '">' + data + '</span>';
              }
              return data;
              
            }
          }]

and after using rendere here is my code

columnDefs: [
          {
            targets: [1,2,-1],
            render: function (data, type, row, meta) {
                return $.fn.dataTable.render.ellipsis(10)(data, type, row);
              if (type === 'display') {
                var btn = 'btn-success btn-xs';
                if (data === 'failed') {
                  btn = 'btn-danger btn-xs';
                } else if (data === 'running') {
                  btn = 'btn-success btn-xs';
                }else if (data === 'halted') {
                    btn = 'btn-warning btn-xs';
                }
                return '<span class="' + btn + '">' + data + '</span>';
              }
              return data;
              
            }
          }]

What could be the alternate way to achieve this ?

Thanks
Koka

colin

Bear in mind you can just create your own ellipses functionality. You can truncate the string with standard JS function (String.substring()) and then append a few dots, and add a title attribute to the element to get the tooltip.

Loren Maxwell

You might also be able to achieve this with just CSS:
https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Note that this solution requires you to specify a maximum width for your column.

It might also be helpful to use render to include the full data inside a title attribute so that the user can see the data by hovering the mouse over the cell.

DAustin

I use a solution along Colin's approach.

When you generate the html table. Use a substring in the cell and append your ellipses.

Add the full content as a data-* property to the td element, then call it with Bootstrap's Tooltip()