MVC_CRUD/Scripts/datatable/examples/server_side/row_details.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>DataTables example - Row details</title>
	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<style type="text/css" class="init">
	
td.details-control {
	background: url('../resources/details_open.png') no-repeat center center;
	cursor: pointer;
}
tr.details td.details-control {
	background: url('../resources/details_close.png') no-repeat center center;
}

	</style>
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/demo.js">
	</script>
	<script type="text/javascript" language="javascript" class="init">
	

function format ( d ) {
	return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
	    'Salary: '+d.salary+'<br>'+
		'The child row can contain any data you wish, including links, images, inner tables etc.';
}

$(document).ready(function() {
	var dt = $('#example').DataTable( {
		"processing": true,
		"serverSide": true,
		"ajax": "scripts/ids-objects.php",
		"columns": [ 
			{
				"class":          "details-control",
				"orderable":      false,
				"data":           null,
				"defaultContent": ""
			},
			{ "data": "first_name" },
			{ "data": "last_name" },
			{ "data": "position" },
			{ "data": "office" }
		],
		"order": [[1, 'asc']]
	} );

	// Array to track the ids of the details displayed rows
	var detailRows = [];