显示行的附加信息
本示例演示了Ajax调用服务器来获得行的附加信息
| 姓名 | 职位 | 工作地点 | 年龄 | |
|---|---|---|---|---|
| 姓名 | 职位 | 工作地点 | 年薪 |
/* 格式化详情功能 - 根据需要修改 */
function format(d) {
// `d` 是该行的原始数据对象
return '<table class="table table-bordered text-nowrap pl-50 mb-0" cellpadding="5">' +
'<tr>' +
'<td>姓名：</td>' +
'<td>' + d.name + '</td>' +
'</tr>' +
'<tr>' +
'<td>分机号码：</td>' +
'<td>' + d.extn + '</td>' +
'</tr>' +
'<tr>' +
'<td>备注：</td>' +
'<td>添加详细信息（如图片等）</td>' +
'</tr>' +
'</table>';
}
$(function () {
var table = $('#dataTableExample').DataTable($.concatCpt('dataTable', {
"ajax": "/data/examples/tables/data-tables/dt-ajax-2.json",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{"data": "name"},
{"data": "position"},
{"data": "office"},
{"data": "salary"}
],
"order": [[1, 'asc']]
}));
// 展开关闭详情时的事件监听
$('#dataTableExample tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// 本行已展开
row.child.hide();
tr.removeClass('shown');
}
else {
// 展开本行
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});<table class="table table-bordered table-hover dataTable table-striped w-full">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</thead>
<tfoot>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</tfoot>
</table>{
"data": [
{
"name": "李霞",
"position": "系统架构师",
"salary": "¥320,800",
"start_date": "2011/04/25",
"office": "北京",
"extn": "5421"
},
{
"name": "杜重治",
"position": "会计",
"salary": "¥170,750",
"start_date": "2011/07/25",
"office": "上海",
"extn": "8422"
},
{
"name": "陈锋",
"position": "初级开发者",
"salary": "¥86,000",
"start_date": "2009/01/12",
"office": "深圳",
"extn": "1562"
},
{
"name": "郑伯宁",
"position": "高级JavaScript开发者",
"salary": "¥433,060",
"start_date": "2012/03/29",
"office": "北京",
"extn": "6224"
},
{
"name": "施华军",
"position": "会计",
"salary": "¥162,700",
"start_date": "2008/11/28",
"office": "上海",
"extn": "5407"
},
{
"name": "吴书振",
"position": "集成专家",
"salary": "¥372,000",
"start_date": "2012/12/02",
"office": "南京",
"extn": "4804"
},
{
"name": "张宁",
"position": "销售代表",
"salary": "¥137,500",
"start_date": "2012/08/06",
"office": "深圳",
"extn": "9608"
},
{
"name": "马世波",
"position": "集成专家",
"salary": "¥327,900",
"start_date": "2010/10/14",
"office": "上海",
"extn": "6200"
},
{
"name": "张章",
"position": "Javascript开发者",
"salary": "¥205,500",
"start_date": "2009/09/15",
"office": "深圳",
"extn": "2360"
},
{
"name": "张竹影",
"position": "软件工程师",
"salary": "¥103,600",
"start_date": "2008/12/13",
"office": "北京",
"extn": "1667"
},
{
"name": "韩庆福",
"position": "办公室主管",
"salary": "¥90,560",
"start_date": "2008/12/19",
"office": "广州",
"extn": "3814"
},
{
"name": "刘勇",
"position": "客户服务",
"salary": "¥342,000",
"start_date": "2013/03/03",
"office": "北京",
"extn": "9497"
},
{
"name": "张忆湫",
"position": "大区经理",
"salary": "¥470,600",
"start_date": "2008/10/16",
"office": "深圳",
"extn": "6741"
},
{
"name": "尚志兴",
"position": "高级营销设计师",
"salary": "¥313,500",
"start_date": "2012/12/18",
"office": "广州",
"extn": "3597"
},
{
"name": "杜若芳",
"position": "大区经理",
"salary": "¥385,750",
"start_date": "2010/03/17",
"office": "广州",
"extn": "1965"
},
{
"name": "杨乔松",
"position": "营销设计师",
"salary": "¥198,500",
"start_date": "2012/11/27",
"office": "广州",
"extn": "1581"
},
{
"name": "闫跃进",
"position": "CEO",
"salary": "¥725,000",
"start_date": "2010/06/09",
"office": "南京",
"extn": "3059"
},
{
"name": "孙凯",
"position": "系统管理员",
"salary": "¥237,500",
"start_date": "2009/04/10",
"office": "南京",
"extn": "1721"
},
{
"name": "赖祥校",
"position": "软件工程师",
"salary": "¥132,000",
"start_date": "2012/10/13",
"office": "广州",
"extn": "2558"
},
{
"name": "郭晖",
"position": "人事主管",
"salary": "¥217,500",
"start_date": "2012/09/26",
"office": "北京",
"extn": "2290"
},
{
"name": "贺光明",
"position": "技术主管",
"salary": "¥345,000",
"start_date": "2011/09/03",
"office": "南京",
"extn": "1937"
},
{
"name": "邓小燕",
"position": "CMO",
"salary": "¥675,000",
"start_date": "2009/06/25",
"office": "南京",
"extn": "6154"
},
{
"name": "白莉惠",
"position": "售前支持",
"salary": "¥106,450",
"start_date": "2011/12/12",
"office": "南京",
"extn": "8330"
},
{
"name": "杨海霞",
"position": "销售代表",
"salary": "¥85,600",
"start_date": "2010/09/20",
"office": "成都",
"extn": "3023"
},
{
"name": "利旭日",
"position": "CEO",
"salary": "¥1,200,000",
"start_date": "2009/10/09",
"office": "广州",
"extn": "5797"
},
{
"name": "范永胜",
"position": "开发者",
"salary": "¥92,575",
"start_date": "2010/12/22",
"office": "北京",
"extn": "8822"
},
{
"name": "于怀斌",
"position": "大区经理",
"salary": "¥357,650",
"start_date": "2010/11/14",
"office": "苏州",
"extn": "9239"
},
{
"name": "赵淑娜",
"position": "软件工程师",
"salary": "¥206,850",
"start_date": "2011/06/07",
"office": "深圳",
"extn": "1314"
},
{
"name": "张淑杰",
"position": "COO",
"salary": "¥850,000",
"start_date": "2010/03/11",
"office": "深圳",
"extn": "2947"
},
{
"name": "陈俊军",
"position": "区域销售",
"salary": "¥163,000",
"start_date": "2011/08/14",
"office": "上海",
"extn": "8899"
},
{
"name": "郭增杰",
"position": "集成专家",
"salary": "¥95,400",
"start_date": "2011/06/02",
"office": "成都",
"extn": "2769"
},
{
"name": "林云",
"position": "开发者",
"salary": "¥114,500",
"start_date": "2009/10/22",
"office": "广州",
"extn": "6832"
},
{
"name": "郭述龙",
"position": "技术作者",
"salary": "¥145,000",
"start_date": "2011/05/07",
"office": "广州",
"extn": "3606"
},
{
"name": "杨军",
"position": "团队主管",
"salary": "¥235,500",
"start_date": "2008/10/26",
"office": "深圳",
"extn": "2860"
},
{
"name": "张海龙",
"position": "售后支持",
"salary": "¥324,050",
"start_date": "2011/03/09",
"office": "北京",
"extn": "8240"
},
{
"name": "耿静",
"position": "营销设计师",
"salary": "¥85,675",
"start_date": "2009/12/09",
"office": "深圳",
"extn": "5384"
},
{
"name": "刘晋荣",
"position": "办公室主管",
"salary": "¥164,500",
"start_date": "2008/12/16",
"office": "深圳",
"extn": "7031"
},
{
"name": "孙宁",
"position": "秘书",
"salary": "¥109,850",
"start_date": "2010/02/12",
"office": "深圳",
"extn": "6318"
},
{
"name": "邢洪锐",
"position": "财务总监",
"salary": "¥452,500",
"start_date": "2009/02/14",
"office": "深圳",
"extn": "9422"
},
{
"name": "陈云云",
"position": "办公室主管",
"salary": "¥136,200",
"start_date": "2008/12/11",
"office": "广州",
"extn": "7580"
},
{
"name": "张禄",
"position": "主任",
"salary": "¥645,750",
"start_date": "2008/09/26",
"office": "南京",
"extn": "1042"
},
{
"name": "王增凤",
"position": "技术支持工程师",
"salary": "¥234,500",
"start_date": "2011/02/03",
"office": "苏州",
"extn": "2120"
},
{
"name": "沈捷",
"position": "软件工程师",
"salary": "¥163,500",
"start_date": "2011/05/03",
"office": "广州",
"extn": "6222"
},
{
"name": "汪化言",
"position": "技术支持工程师",
"salary": "¥139,575",
"start_date": "2009/08/19",
"office": "上海",
"extn": "9383"
},
{
"name": "杨正机",
"position": "开发者",
"salary": "¥98,540",
"start_date": "2013/08/11",
"office": "南京",
"extn": "8327"
},
{
"name": "戴向军",
"position": "技术支持工程师",
"salary": "¥87,500",
"start_date": "2009/07/07",
"office": "深圳",
"extn": "2927"
},
{
"name": "王延芳",
"position": "数据分析工程师",
"salary": "¥138,575",
"start_date": "2012/04/09",
"office": "苏州",
"extn": "8352"
},
{
"name": "沈健",
"position": "软件工程师",
"salary": "¥125,250",
"start_date": "2010/01/04",
"office": "南京",
"extn": "7439"
},
{
"name": "刘伟峰",
"position": "软件工程师",
"salary": "¥115,000",
"start_date": "2012/06/01",
"office": "深圳",
"extn": "4389"
},
{
"name": "陆先生",
"position": "初级Javascript开发者",
"salary": "¥75,650",
"start_date": "2013/02/01",
"office": "北京",
"extn": "3431"
},
{
"name": "纪虹羽",
"position": "销售代表",
"salary": "¥145,600",
"start_date": "2011/12/06",
"office": "南京",
"extn": "3990"
},
{
"name": "肖艳",
"position": "大区经理",
"salary": "¥356,250",
"start_date": "2011/03/21",
"office": "广州",
"extn": "1016"
},
{
"name": "沈国金",
"position": "系统管理员",
"salary": "¥103,500",
"start_date": "2009/02/27",
"office": "广州",
"extn": "6733"
},
{
"name": "王燕峰",
"position": "开发者",
"salary": "¥86,500",
"start_date": "2010/07/14",
"office": "深圳",
"extn": "8196"
},
{
"name": "徐若琳",
"position": "大区经理",
"salary": "¥183,000",
"start_date": "2008/11/13",
"office": "北京",
"extn": "6373"
},
{
"name": "徐成业",
"position": "Javascript开发者",
"salary": "¥183,000",
"start_date": "2011/06/27",
"office": "苏州",
"extn": "5384"
},
{
"name": "李岸白",
"position": "客户服务",
"salary": "¥112,000",
"start_date": "2011/01/25",
"office": "南京",
"extn": "4226"
}
]
}