jquery datatable工具提示

我正在使用jquery數據表，我想弄清楚如何讓工具提示顯示所有的文本在用省略號切斷文本的列上的文本。我使用數據表「sAjaxSource」屬性從服務器自動獲取表數據，所以我無法控制jQuery數據表插入到tbody中的html。jquery datatable工具提示

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>

我發現有人曾建議一個div添加到TD，然後添加最大高度，但是我的jquery數據表使用ajax屬性來加載數據，所以我無法控制表中的tbody部分在html中的樣子。

任何幫助？

謝謝！傑森

來源

2015-11-10 jre247

max-height並不適用於所有類型的元素的工作，它適用於

......所有元素，但非替換行內元素，表格列，並列組

從報價MDN。 <td>的默認顯示類型爲table-cell，因此max-height對這些不起作用。如果您嘗試更改<td>的顯示類型，則會混淆dataTables渲染，您將得到一些非常奇怪的表格佈局。但是你不能用columnDefs S：

$('#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; 
       }  
      } 
     } 
    ]  
});

以上只會使<td>的可視化佈局「包裝所有內容到<span>秒。您仍然可以搜索/過濾內容，因爲它沒有隱藏或包裹在<span>的內容中。現在，您可以定義所需的CSS爲.td-container：

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

的34px只是一個建議，這似乎符合兩行。

叉小提琴 - >http://jsfiddle.net/19d5nkus/

來源

2015-11-10 16:18:27 davidkonrad

我不知道這是否有幫助，但檢查出來。

http://jsfiddle.net/x4kvmdcm/

我用jQuery來添加div圍繞TD，並設置overflow-y屬性。我已將其設置爲hidden，但您可以使用scroll，以便您可以在td內滾動以查看內容。您可以將代碼添加到您的ajax complete/success事件中，以便您在執行代碼時擁有tbody。

希望這會有所幫助。

來源

2015-11-10 15:49:13 user1

*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; 
     } 
    } 
] 
});

來源

2017-04-21 14:32:37 Ron

jquery datatable工具提示

回答

相關問題