第一種方法是網上看到的，沒成功，貼出來參考一下
<!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) + ' <a href="javascript:void(0);" ><b>更多</b></a>'; } //全部備注信息
function getTotalRemarksHtml(remarks){ return remarks + ' <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
http://datatables.club/reference/api/