Created
March 13, 2018 11:20
-
-
Save anonymous/f391fef3a8956495601a04de2b0222ef to your computer and use it in GitHub Desktop.
Nested Datatables 1.10.11 (source: https://jsfiddle.net/karlnicholas/2gc3r7vv/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
td.details-control { | |
background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center; | |
cursor: pointer; | |
} | |
tr.shown td.details-control { | |
background: url('http://i.imgur.com/SD7Dz.png') no-repeat center center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table class="table table-striped table-bordered" id="opiniondt"> | |
<thead><tr><th></th><th>Date</th><th>Title</th><th>Document</th></tr></thead> | |
<tr><td></td><td></td><td></td><td></td></tr> | |
</table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var opinions = [{"id":47,"name":"E061140","fileName":null,"disposition":null,"summary":null,"title":"Marr. of Eustice","opinionDate":"2015-12-10"},{"id":48,"name":"C070296M","fileName":null,"disposition":null,"summary":null,"title":"P. v. Nilsson","opinionDate":"2015-12-10"},{"id":50,"name":"S209643","fileName":null,"disposition":null,"summary":null,"title":"P. v. Stevens","opinionDate":"2015-12-10"}]; | |
var sections = [{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"177.5"},"refCount":2,"section":{"part":"Chapter","partNumber":"4","title":"Incidental Powers and Duties of Judicial Officers","codeRange":{"sNumber":{"position":168,"sectionNumber":"177"},"eNumber":{"position":171,"sectionNumber":"179"}},"depth":3}},{"code":"code of civil procedure","sectionNumber":{"position":-1,"sectionNumber":"580"},"refCount":16,"section":{"part":"Chapter","partNumber":"1","title":"Judgment in General","codeRange":{"sNumber":{"position":862,"sectionNumber":"577"},"eNumber":{"position":879,"sectionNumber":"582.5"}},"depth":3}}]; | |
function format ( table_id ) { | |
return '<table class="table table-striped" id="opiniondt_'+table_id+'">'+ | |
'<thead><tr><th>References</th><th>Section</th><th>Statute Titles</th></tr></thead>'+ | |
'<tr>'+ | |
'<td>Full name:</td>'+ | |
'<td>Extension number:</td>'+ | |
'<td>Extra info:</td>'+ | |
'</tr>'+ | |
'<tr>'+ | |
'<td>Full name:</td>'+ | |
'<td>Extension number:</td>'+ | |
'<td>Extra info:</td>'+ | |
'</tr>'+ | |
'</table>'; | |
} | |
var iTableCounter=1; | |
var oInnerTable; | |
$(document).ready(function() { | |
TableHtml = $('#opiniondt').html(); | |
var table = $('#opiniondt').DataTable( { | |
paging: false, | |
searching: false, | |
info: false, | |
rowId: 'id', | |
data: opinions, | |
columns:[ | |
{ className: 'details-control', | |
orderable: false, | |
data: null, | |
defaultContent: '' }, | |
{ data:'opinionDate'}, | |
{ data:'title'}, | |
{ data:'name'} | |
], | |
order: [[1, 'asc']] | |
} ); | |
/* Add event listener for opening and closing details | |
* Note that the indicator for showing which row is open is not controlled by DataTables, | |
* rather it is done here | |
*/ | |
$('#opiniondt 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(iTableCounter) ).show(); | |
tr.addClass('shown'); | |
// try datatable stuff | |
oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({ | |
data: sections, | |
autoWidth: true, | |
deferRender: true, | |
info: false, | |
lengthChange: false, | |
ordering: false, | |
paging: false, | |
scrollX: false, | |
scrollY: false, | |
searching: false, | |
columns:[ | |
{ data:'refCount' }, | |
{ data:'section.codeRange.sNumber.sectionNumber' }, | |
{ data:'section.title' } | |
] | |
}); | |
iTableCounter = iTableCounter + 1; | |
} | |
}); | |
} ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment