jquery datatable tooltip

1
votes

I'm using a jquery datatable and I'm trying to figure out how to get a tooltip to display all of the text on a column where the text is cut off with an ellipsis. I'm using the datatable "sAjaxSource" property which fetches the table data from the server automatically, so I don't have control over the html that jquery datatable inserts into the tbody.

http://jsfiddle.net/x9o891c5/132/

css:

#example tr td  {
 max-width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

jquery:

$(document).ready(function() {
    $('#example').dataTable();
} );

html:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett </td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>

        <tr>
            <td>ZoWinGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett WintersGarrett Winterstersrita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>

    </tbody>
</table>

I found someone had suggested to add a div to a td and then add max-height, however my jquery datatable is using the ajax property to load the data, so I don't have control over what the tbody section of the table looks like in html.

Any help?

Thanks! Jason

3
jquerydatatables

3 Answers

3
votes

max-height does not work with all kind of elements, it applies to

...all elements but non-replaced inline elements, table columns, and column groups

quote from MDN. <td>'s has by default the display type table-cell thus max-height does not work on those. If you try to change the display type of <td>'s you mess dataTables rendering up, you will get some really weird table layouts. But you can wrap all content into <span>'s by using columnDefs :

$('#example').dataTable({
    columnDefs : [
       {   
          targets : [0,1,2,3,4,5],
          render : function(data, type) {
              if (type == 'display') {
                 return '<span class="td-container">'+data+'</span>';
              } else {
                  return data;
              }     
          }
       }
   ]      
});

The above will only render the visual layout of the <td>'s. You can still search / filter the content as it was not hidden or wrapped into <span>'s. Now you can define the desired CSS for .td-container :

span.td-container {
  height: 34px !important;
  overflow-y : hidden;  
  display: inline-block;  
}

the 34px is just a suggestion, it seems to fit two lines.

forked fiddle -> http://jsfiddle.net/19d5nkus/

2
votes

This is pretty late, but someone could benefit out of this, i extended the ellipsis, to show tooltip: 

$('#example').dataTable({
columnDefs : [
   {   
      targets : [0,1,2,3,4,5],
      render : function(data, type) {
          return type === 'display' && data.length > 6) ?
            '<span title= \"' + data +'\">' + data.substr(0,6) + '...</span>' : data; 
      }
   }
]
});
0
votes

I don't know if this is helpful but check it out.

http://jsfiddle.net/x4kvmdcm/

I used jquery to add div around the td and set the overflow-y property. I have set it to hidden but you can use scroll so that you can scroll inside a td to see the content. You can place the code to add the div on your ajax complete/success event so you will have the tbody when you execute the code.

Hope this helps.