Collapsed group with AJAX sourced data
Collapsed group with AJAX sourced data
2008jackson
Posts: 38Questions: 9Answers: 0
Hi, following is my code to generate collapsed group with data from SharePoint Online. On page load, the grouping is good as desired and collapsed. However, I'm unable to expand any group to see the rows. I've modelled my code after this example. Kindly assist.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.select.min.js"></script>
<script type="text/javascript" src="js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="js/all.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/rowGroup.dataTables.min.css">
<script>
$(document).ready(function() {
var oDataUrl = "SPO_SITE/_api/web/lists/getbytitle('SPO_LIST')/items?$top=2000&$select=*";
$.ajax({
url: oDataUrl, type: "GET", dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: function(data) {
var collapsedGroups = {};
var table = $('#table_id').DataTable({
paging: false,
"aaData": data.d.results,
order: [[0, 'asc']],
"rowGroup": {
dataSrc: "Type",
startRender: function(rows, group) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function(r) {
r.style.display = 'none';
if (collapsed) {
r.style.display = '';
}
});
return $('<tr/>')
.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', group)
.toggleClass('collapsed', collapsed);
}
},
"aoColumns": [
{"mData": "Type"},
{"mData": "EncodedAbsUrl",
"mRender": function(data, type, full) {
return '<a href="' + data + '" target="_blank">View</a>';
}
}
]
});
},
error: myErrHandler
});
$('#table_id tbody').on('click', 'tr.group-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});
function myErrHandler(data, errMessage) {alert("Error: " + errMessage);}
</script>
</head>
<body>
<div class="container-fluid mt-4 mb-4">
<table id="table_id" class="table table-sm small">
<thead>
<tr>
<th>Type</th>
<th></th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Answers
Issue resolved by downgrading rowgroup to version 1.0.2
As you can see, it works in the example you linked to, so it must be something to do with your environment. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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