How to implement row detail feature in Jquery Datatable?
How to implement row detail feature in Jquery Datatable?
ashish_sourav11
Posts: 1Questions: 1Answers: 0
I am using Jquery DataTable plugin to display all the database records and want to use the row details feature of Jquery DataTable. I am able to display the records within Jquery DataTable using web service and now I want that when a user clicks on any ID, the row should drop down and further I want to display more records of that particular ID within that expanded row in a tabluar format along with any image if present.
Aspx Page-
<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.';
}
$(document).ready(function () {
var dt;
$.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>
<style type="text/css">
td.details-control {
background: url('images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('images/details_close.png') no-repeat center center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="border:1px solid black; padding:3px; width:1000px;">
<table id="datatable">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Age</th>
<th>Salary</th>
<th>Address</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Department</th>
<th>Age</th>
<th>Salary</th>
<th>Address</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
I am getting this error- Uncaught TypeError: dt.row is not a function on this line
var row = dt.row(tr);
Please guide me where I am doing wrong?
This discussion has been closed.
Answers
I've also encountered this error a few times, with DataTables 1.10.5 and 1.10.11, when trying to publish every scripts at the end of the HTML page (in order to use JavaScript "defer").
However the DataTables CSS & JS had to be relocated into the same submittable div as the form.