datatable行內容增多時，收縮行（展示【更多】或者【收起】）
前言：我們在使用datatables時，可能會遇到單元格內內容太多無法展示完全，省略號的方法使我們看不到全部的內容，已經不能滿足我們的需求。想要在單元格內有個按鈕【更多】，點擊後該單元格的內容完全展示出來，點擊【收起】後單元格又恢復原狀，不影響排版。
完全展示：
部分展示：
貼上代碼：
<!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>另外，在array.txt文件中的數據是：
{
"data": [
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect, System Architect,System Architect, System Architect,System Architect, System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25"
},
"contact": [
"Tokyo",
"8422"
]
},
{
"name": "Ashton Cox",
"hr": {
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12"
},
"contact": [
"San Francisco",
"1562"
]
},
{
"name": "Cedric Kelly",
"hr": {
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29"
},
"contact": [
"Edinburgh",
"6224"
]
},
{
"name": "Airi Satou",
"hr": {
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28"
},
"contact": [
"Tokyo",
"5407"
]
},
{
"name": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02"
},
"contact": [
"New York",
"4804"
]
},
{
"name": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06"
},
"contact": [
"San Francisco",
"9608"
]
},
{
"name": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14"
},
"contact": [
"Tokyo",
"6200"
]
},
{
"name": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009/09/15"
},
"contact": [
"San Francisco",
"2360"
]
}
]
}