我正在使用Jquery DataTable插件来显示所有数据库记录，并希望使用Jquery DataTable的行详细信息功能。我能够使用Web服务在Jquery DataTable中显示记录，现在我希望当用户点击任何ID时，该行应该下拉，并且我希望在tabluar中的该扩展行中显示该特定ID的更多记录格式以及任何图像（如果存在）。请指导我如何实现这一点。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<link href="jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
function format(d) {
return 'Full name: ' + d.FirstName + ' ' + d.LastName + '<br>' +
'Department: ' + d.DEPARTMENT + '<br>' +
'The child row can contain any data you wish, including links, images, inner tables etc.';
}
var dt;
$(document).ready(function () {
$.ajax({
url: 'EmployeeService.asmx/GetEmployees',
method: 'post',
dataType: 'json',
success: function (data) {
dt = $('#datatable').dataTable({
data: data,
'scrollY': 200,
columns: [
{
"class":"details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ 'data': 'ID' },
{ 'data': 'FirstName' },
{ 'data': 'LastName' },
{ 'data': 'DEPARTMENT' },
{ 'data': 'AGE' },
{ 'data': 'Salary' },
{ 'data': 'Address' },
],
"order": [[1, 'asc']]
});
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#datatable tbody').on('click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row(tr);
var idx = $.inArray(tr.attr('id'), detailRows);
if (row.child.isShown()) {
tr.removeClass('details');
row.child.hide();
// Remove from the 'open' array
detailRows.splice(idx, 1);
}
else {
tr.addClass('details');
row.child(format(row.data())).show();
// Add to the 'open' array
if (idx === -1) {
detailRows.push(tr.attr('id'));
}
}
});
// On each draw, loop over the `detailRows` array and show any child rows
dt.on('draw', function () {
$.each(detailRows, function (i, id) {
$('#' + id + ' td.details-control').trigger('click');
});
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:1px solid black; padding:3px; width:1000px;">
<table id="datatable">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Age</th>
<th>Salary</th>
<th>DateOfJoining</th>
<th>Address</th>
<th>EMPImage</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Age</th>
<th>Salary</th>
<th>DateOfJoining</th>
<th>Address</th>
<th>EMPImage</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
网络服务
[WebMethod]
public void GetEmployees()
{
string CONStrng = ConfigurationManager.ConnectionStrings["constrng"].ConnectionString;
List<Employee> employees = new List<Employee>();
using (SqlConnection con = new SqlConnection(CONStrng))
{
SqlCommand cmd = new SqlCommand("GetEmployee", con);
cmd.CommandTimeout = 50;
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Employee employee = new Employee();
employee.ID = Convert.ToInt32(dr["id"]);
employee.FirstName = dr["firstname"].ToString();
employee.LastName = dr["lastname"].ToString();
employee.DEPARTMENT = dr["department"].ToString();
employee.AGE = Convert.ToInt32(dr["age"]);
employee.Salary = dr["salary"].ToString();
employee.DOJ = Convert.ToDateTime(dr["JoiningDT"]);
employee.Address = dr["address"].ToString();
employee.IMAGE = dr["empimage"].ToString();
employees.Add(employee);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(employees));
}
JSON响应 -
[{"ID":1,"FirstName":"Ashish","LastName":"Kumar","SSN":111,"DEPARTMENT":"IT","AGE":25,"Salary":"18000","MartialStatus":"Single","Address":"Garia"},{"ID":2,"FirstName":"Abhishek","LastName":"Kumar","SSN":112,"DEPARTMENT":"IT","AGE":26,"Salary":"18000","MartialStatus":"Single","Address":"Garia"},{"ID":3,"FirstName":"Joy","LastName":"Das","SSN":113,"DEPARTMENT":"Operations","AGE":25,"Salary":"20000","MartialStatus":"Married","Address":"Garia"},{"ID":4,"FirstName":"Abir","LastName":"Chakraborty","SSN":114,"DEPARTMENT":"Marketing","AGE":29,"Salary":"40000","MartialStatus":"Single","Address":"Birati"},{"ID":5,"FirstName":"Priyanko","LastName":"Dey","SSN":115,"DEPARTMENT":"IT","AGE":28,"Salary":"15000","MartialStatus":"Single","Address":"Dhakuria"},{"ID":6,"FirstName":"Shamik","LastName":"Ghosh","SSN":116,"DEPARTMENT":"Export","AGE":35,"Salary":"40000","MartialStatus":"Married","Address":"Bali"},{"ID":7,"FirstName":"Sree Mohan","LastName":"Nathani","SSN":117,"DEPARTMENT":"Accounts","AGE":40,"Salary":"42000","MartialStatus":"Married","Address":"Girish Park"},{"ID":8,"FirstName":"Asis","LastName":"Dingal","SSN":118,"DEPARTMENT":"Accounts","AGE":39,"Salary":"30000","MartialStatus":"Married","Address":"Garia"},{"ID":9,"FirstName":"Sankar","LastName":"Kapuria","SSN":119,"DEPARTMENT":"Maintenance","AGE":32,"Salary":"10000","MartialStatus":"Married","Address":"Panskura"},{"ID":10,"FirstName":"Rahul","LastName":"Bannerjee","SSN":120,"DEPARTMENT":"HR","AGE":25,"Salary":"15000","MartialStatus":"Single","Address":"Kalighat"},{"ID":11,"FirstName":"Rekha","LastName":"Prasad","SSN":121,"DEPARTMENT":"Data Entry","AGE":28,"Salary":"8000","MartialStatus":"Single","Address":"Lake Town"},{"ID":12,"FirstName":"Pramod","LastName":"Modi","SSN":122,"DEPARTMENT":"Director","AGE":62,"Salary":"50000","MartialStatus":"Married","Address":"Garia Hat"}]