Datatable 省略显示列中内容，当鼠标放在内容上，悬浮显示全部内容

第一种方法是网上看到的，没成功，贴出来参考一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatables展示切换</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
<script>
//切换显示备注信息，显示部分或者全部
function changeShowRemarks(obj){//obj是td
var content = $(obj).attr("content");
if(content != null && content != ''){
if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注，切换到显示部分
//$(obj).removeAttr('isDetail');//remove也可以
$(obj).attr('isDetail',false);
$(obj).html(getPartialRemarksHtml(content));
}else{//当前显示的是部分备注信息，切换到显示全部
$(obj).attr('isDetail',true);
$(obj).html(getTotalRemarksHtml(content));
}
}
}
//部分备注信息
function getPartialRemarksHtml(remarks){
return remarks.substr(0,10) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>更多</b></a>';
}

//全部备注信息
function getTotalRemarksHtml(remarks){
return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
}
$(document).ready(function() {

$('#example').DataTable({
"ajax": "arrays.txt",
"processing": true,
"columns": [
{"data": "name"},
{"data": "hr.position"},
{"data": "contact.0"},
{"data": "contact.1"},
{"data": "hr.start_date"},
{"data": "hr.salary"}
],
"createdRow": function( row, data, dataIndex ) {
if(data.hr.position.length > 10){//只有超长，才有td点击事件
$(row).children('td').eq(1).attr('onclick','javascript:changeShowRemarks(this);');
}
$(row).children('td').eq(1).attr('content',data.hr.position);
},
"columnDefs" : [
{
"type": "date",
"targets": 1,
"render": function (data, type, full, meta) {
if (full.hr.position.length > 10) {
return getPartialRemarksHtml(full.hr.position);//显示部分信息
} else {
return full.hr.position;//显示原始全部信息 }
}
}
}
]
})
})
</script>
</body>
</html>

第二种方法是：

加个title属性就好了

"targets": [11],
"render": function (data, type, full, meta) {
    if (data.length > 10) {
        return "<a title='" + data + "' href='#' style='text-decoration: none;'>" + data.trim().substr(0, 10) + "..." + "</a>";
    } else {
        return data;
    }


另附Datatable文档链接：https://datatables.net/blog/2016-02-26

Datatable 省略显示列中内容，当鼠标放在内容上，悬浮显示全部内容

猜你喜欢