How to show less text in each column?

mdev

Some columns contain very long sentences, So the table exceeds the browser width and a horizontal scroll bar is shown.

Is there is an option to reduce the text and show only few words?

Or a read more option?

bindrid

Here is how I do it: ( I set the second column excessively small for illustration).

http://live.datatables.net/duhumilo/1/edit

I use the createdRow callback to set the title so the user can mouse over and see full text.

My css:

.truncate {
  max-width:50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 

and JavaScript:

$(document).ready( function () {
  var table = $('#example').DataTable({
    columnDefs:[{targets:1,className:"truncate"}],
    createdRow: function(row){
       var td = $(row).find(".truncate");
       td.attr("title", td.html());
  }
  });
} );

colin

Hi @mdev ,

In addition to @bindrid 's suggestion, this blog post here may be useful,

Cheers,

Colin

mdev

@bindrid , What if I want to apply that for more that one column? targets:[1, 2,4]?

mdev

I changed it to :

columnDefs:[{targets:[1, 2, 4],className:"truncate"}], createdRow: function(row){ var td = jQuery(row).find(".truncate"); td.each(function(index, el) { jQuery(this).attr("title", jQuery(this).html()); }); }

bindrid

or

$(document).ready( function () {
  var table = $('#example').DataTable({
    columnDefs:[{targets:[0,1,2],className:"truncate"}],
    createdRow: function(row){
       $(row).find(".truncate").each(function(){
          $(this).attr("title", this.innerText);
       });
  }
  });
} );