1+ <!--
2+ ~ The MIT License (MIT)
3+ ~
4+ ~ Copyright (c) 2025 Pierre Adam
5+ ~
6+ ~ Permission is hereby granted, free of charge, to any person obtaining a copy
7+ ~ of this software and associated documentation files (the "Software"), to deal
8+ ~ in the Software without restriction, including without limitation the rights
9+ ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+ ~ copies of the Software, and to permit persons to whom the Software is
11+ ~ furnished to do so, subject to the following conditions:
12+ ~
13+ ~ The above copyright notice and this permission notice shall be included in all
14+ ~ copies or substantial portions of the Software.
15+ ~
16+ ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+ ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+ ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+ ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+ ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+ ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+ ~ SOFTWARE.
23+ -->
24+
125<!DOCTYPE html>
226< html lang ="en ">
327< head >
1236 < script src ="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js "> </ script >
1337 < script >
1438 $ ( document ) . ready ( function ( ) {
15- $ ( '#example' ) . DataTable ( {
39+ const table = $ ( '#example' ) . DataTable ( {
1640 serverSide : true ,
1741 processing : true ,
1842 searching : true ,
2549 }
2650 } ,
2751 columns : [
52+ {
53+ className : 'dt-control' ,
54+ orderable : false ,
55+ data : null ,
56+ defaultContent : ''
57+ } ,
2858 { data : "firstName" , orderable : true , searchable : true } ,
2959 { data : "lastName" , orderable : true , searchable : true } ,
3060 { data : "title" , orderable : true , searchable : true } ,
3161 { data : "bloodGroup" , orderable : false , searchable : true } ,
3262 { data : "active" , orderable : false , searchable : false }
33- ]
63+ ] ,
64+ order : [ [ 1 , 'asc' ] ]
65+ } ) ;
66+
67+ function format ( d ) {
68+ // `d` is the original data object for the row
69+ return (
70+ '<dl>' +
71+ '<dt>Full name:</dt>' +
72+ '<dd>' +
73+ d . fullName +
74+ '</dd>' +
75+ '<dt>UUID:</dt>' +
76+ '<dd>' +
77+ d . uid +
78+ '</dd>'
79+ ) ;
80+ }
81+
82+ table . on ( 'click' , 'td.dt-control' , function ( e ) {
83+ let tr = e . target . closest ( 'tr' ) ;
84+ let jqData = $ ( tr ) . data ( ) ;
85+ let row = table . row ( tr ) ;
86+ let fullDtData = row . data ( ) ;
87+
88+ if ( row . child . isShown ( ) ) {
89+ // This row is already open - close it
90+ row . child . hide ( ) ;
91+ } else {
92+ // Open this row
93+ row . child ( format ( jqData ) ) . show ( ) ;
94+ }
3495 } ) ;
3596 } ) ;
3697 </ script >
@@ -41,6 +102,7 @@ <h1>DataTables Example</h1>
41102 < table class ="display " id ="example " style ="width:100% ">
42103 < thead >
43104 < tr >
105+ < th style ="width: 30px "> </ th >
44106 < th > First Name</ th >
45107 < th > Last Name</ th >
46108 < th > Title</ th >
0 commit comments