Updated DataTables with Legacy Server Side - Expandable Child Rows Issue.
Updated DataTables with Legacy Server Side - Expandable Child Rows Issue.
jcglazier
Posts: 7Questions: 2Answers: 0
I have updated my DataTables API, however still using Legacy ServerSide processing. Looking to add ChildRows to the table using the below guide - I am not even seeing the buttons to expand? Text is also appearing in a random order, across only some columns? I have included my code if anybody could recommend some changes I could try?
Thanks in advance.
https://datatables.net/examples/api/row_details.html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Permutation Search Engine</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style><%@include file="/WEB-INF/views/jquery-ui.css"%></style>
<style><%@include file="/WEB-INF/views/updatedDataTables/datatablesnew.css"%></style>
<style><%@include file="/WEB-INF/views/updatedDataTables/jquery.dataTables.min.css"%></style>
<style><%@include file="/WEB-INF/views/updatedDataTables/responsive.dataTables.min.css"%></style>
<style>
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}</style>
</head>
<body>
<div id="scmainbody">
<jsp:include page="/WEB-INF/views/_header.jsp"></jsp:include>
<script src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/datatablesnew.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.yadcf.js"></script>
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.STARTENGSTATUS+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.CURDISPOSITIONCODE+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#personTable').DataTable( {
"processing" : true,
"serverSide" : true,
"sAjaxSource" : "org/mlb/simplewebapp/servlet/PSE/PSEenhancedSearching.java",
"aoColumns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "aaData": "STARTPN" },
{ "aaData": "STARTNAME" },
{ "aaData": "ENDPN" },
{ "aaData": "ENDNAME" },
{ "aaData": "MLBPATH" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>
<table width="100%" border="0" margin="0" padding="0"
class="display" id="personTable">
<thead>
<tr>
<th></th>
<th>STARTPN</th>
<th>STARTNAME</th>
<th>ENDPN</th>
<th>ENDNAME</th>
<th>MLBPATH</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>STARTPN</th>
<th>STARTNAME</th>
<th>ENDPN</th>
<th>ENDNAME</th>
<th>MLBPATH</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
This discussion has been closed.
Replies
Hi @jcglazier ,
Have you also updated your CSS - that could explain not seeing the button. If you have already, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Cheers,
Colin
Thanks @Colin - How would I do this for the server side processing - would I just hardcode the values?
Hi @jcglazier ,
Maybe see if you could use this script as a starting point. This is using servers-side processing - your problem is more likely to be something on the client end, so hopefully we can reproduce it still. Alternatively, if your page is public, I could go there to see,
Cheers,
Colin