Skip to content

Commit ad55ece

Browse files
AllanJardAllanJard
committed
Updated: Examples updated to have Vanilla JS code and use Pretter More for formatting
1 parent 0c34d99 commit ad55ece

36 files changed

+853
-379
lines changed

‎css/responsive.dataTables.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ table.dataTable {
5555
@include control;
5656
@include control-open;
5757
}
58+
59+
&.arrow-right::before {
60+
content: "◄";
61+
}
5862
}
5963

6064
> tr.parent {
@@ -86,6 +90,10 @@ table.dataTable {
8690
@include control;
8791
@include control-open;
8892
}
93+
94+
&.arrow-right::before {
95+
content: "◄";
96+
}
8997
}
9098

9199
> tr.parent {
@@ -133,8 +141,6 @@ table.dataTable {
133141
min-width: 75px;
134142
font-weight: bold;
135143
}
136-
137-
span.dtr-data {}
138144
}
139145
}
140146

‎examples/child-rows/column-control.xml

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,47 @@
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable( {
10-
responsive: {
11-
details: {
12-
type: 'column'
13-
}
14-
},
15-
columnDefs: [ {
8+
$('#example').DataTable({
9+
columnDefs: [
10+
{
1611
className: 'dtr-control',
1712
orderable: false,
18-
targets: 0
19-
} ],
20-
order: [ 1, 'asc' ]
21-
} );
22-
} );
13+
targets: 0
14+
}
15+
],
16+
order: [1, 'asc'],
17+
responsive: {
18+
details: {
19+
type: 'column'
20+
}
21+
}
22+
});
2323
2424
]]>
2525
</js>
2626

27+
<js-vanilla>
28+
<![CDATA[
29+
30+
new DataTable('#example', {
31+
columnDefs: [
32+
{
33+
className: 'dtr-control',
34+
orderable: false,
35+
targets: 0
36+
}
37+
],
38+
order: [1, 'asc'],
39+
responsive: {
40+
details: {
41+
type: 'column'
42+
}
43+
}
44+
});
45+
46+
]]>
47+
</js-vanilla>
48+
2749
<title lib="Responsive">Column controlled child rows</title>
2850

2951
<info><![CDATA[

‎examples/child-rows/custom-renderer.xml

Lines changed: 62 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,74 @@
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable( {
10-
responsive: {
11-
details: {
12-
renderer: function ( api, rowIdx, columns ) {
13-
var data = $.map( columns, function ( col, i ) {
14-
return col.hidden ?
15-
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
16-
'<td>'+col.title+':'+'</td> '+
17-
'<td>'+col.data+'</td>'+
18-
'</tr>' :
19-
'';
20-
} ).join('');
21-
22-
return data ?
23-
$('<table/>').append( data ) :
24-
false;
25-
}
8+
$('#example').DataTable({
9+
responsive: {
10+
details: {
11+
renderer: function (api, rowIdx, columns) {
12+
var data = $.map(columns, function (col, i) {
13+
return col.hidden
14+
? '<tr data-dt-row="' +
15+
col.rowIndex +
16+
'" data-dt-column="' +
17+
col.columnIndex +
18+
'">' +
19+
'<td>' +
20+
col.title +
21+
':' +
22+
'</td> ' +
23+
'<td>' +
24+
col.data +
25+
'</td>' +
26+
'</tr>'
27+
: '';
28+
}).join('');
29+
30+
return data ? $('<table/>').append(data) : false;
2631
}
2732
}
28-
} );
29-
} );
33+
}
34+
});
3035
3136
]]>
3237
</js>
3338

39+
<js-vanilla>
40+
<![CDATA[
41+
42+
new DataTable('#example', {
43+
responsive: {
44+
details: {
45+
renderer: function (api, rowIdx, columns) {
46+
let data = columns.map((col, i) => {
47+
return col.hidden
48+
? '<tr data-dt-row="' +
49+
col.rowIndex +
50+
'" data-dt-column="' +
51+
col.columnIndex +
52+
'">' +
53+
'<td>' +
54+
col.title +
55+
':' +
56+
'</td> ' +
57+
'<td>' +
58+
col.data +
59+
'</td>' +
60+
'</tr>'
61+
: '';
62+
}).join('');
63+
64+
let table = document.createElement('table');
65+
table.innerHTML = data;
66+
67+
return data ? table : false;
68+
}
69+
}
70+
}
71+
});
72+
73+
]]>
74+
</js-vanilla>
75+
3476
<title lib="Responsive">Custom child row renderer</title>
3577

3678
<info><![CDATA[

‎examples/child-rows/disable-child-rows.xml

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,27 @@
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable( {
10-
responsive: {
11-
details: false
12-
}
13-
} );
14-
} );
8+
$('#example').DataTable({
9+
responsive: {
10+
details: false
11+
}
12+
});
1513
1614
]]>
1715
</js>
1816

17+
<js-vanilla>
18+
<![CDATA[
19+
20+
new DataTable('#example', {
21+
responsive: {
22+
details: false
23+
}
24+
});
25+
26+
]]>
27+
</js-vanilla>
28+
1929
<title lib="Responsive">Disable child rows</title>
2030

2131
<info><![CDATA[

‎examples/child-rows/right-column.xml

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,47 @@
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable( {
10-
responsive: {
11-
details: {
12-
type: 'column',
13-
target: -1
14-
}
15-
},
16-
columnDefs: [ {
17-
className: 'dtr-control',
8+
$('#example').DataTable({
9+
columnDefs: [
10+
{
11+
className: 'dtr-control arrow-right',
1812
orderable: false,
19-
targets: -1
20-
} ]
21-
} );
22-
} );
13+
target: -1
14+
}
15+
],
16+
responsive: {
17+
details: {
18+
type: 'column',
19+
target: -1
20+
}
21+
}
22+
});
2323
2424
]]>
2525
</js>
2626

27+
<js-vanilla>
28+
<![CDATA[
29+
30+
new DataTable('#example', {
31+
columnDefs: [
32+
{
33+
className: 'dtr-control arrow-right',
34+
orderable: false,
35+
target: -1
36+
}
37+
],
38+
responsive: {
39+
details: {
40+
type: 'column',
41+
target: -1
42+
}
43+
}
44+
});
45+
46+
]]>
47+
</js-vanilla>
48+
2749
<title lib="Responsive">Column control - right</title>
2850

2951
<info><![CDATA[

‎examples/child-rows/whole-row-control.xml

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,56 @@
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable( {
10-
responsive: {
11-
details: {
12-
type: 'column',
13-
target: 'tr'
14-
}
15-
},
16-
columnDefs: [ {
17-
className: 'control',
8+
$('#example').DataTable({
9+
columnDefs: [
10+
{
11+
className: 'dtr-control',
1812
orderable: false,
19-
targets: 0
20-
} ],
21-
order: [ 1, 'asc' ]
22-
} );
23-
} );
13+
target: 0
14+
}
15+
],
16+
order: [1, 'asc'],
17+
responsive: {
18+
details: {
19+
type: 'column',
20+
target: 'tr'
21+
}
22+
}
23+
});
2424
2525
]]>
2626
</js>
2727

28+
<js-vanilla>
29+
<![CDATA[
30+
31+
new DataTable('#example', {
32+
columnDefs: [
33+
{
34+
className: 'dtr-control',
35+
orderable: false,
36+
target: 0
37+
}
38+
],
39+
order: [1, 'asc'],
40+
responsive: {
41+
details: {
42+
type: 'column',
43+
target: 'tr'
44+
}
45+
}
46+
});
47+
48+
]]>
49+
</js-vanilla>
50+
2851
<title lib="Responsive">Whole row child row control</title>
2952

3053
<info><![CDATA[
3154
3255
When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.
3356
34-
This example uses the `tr` selector to have the whole row act as the control.
57+
This example uses the `tr` selector to have the whole row act as the control and the `dtr-control` class on the first cell in each row to indicate the child row state.
3558
3659
]]></info>
3760

‎examples/column-control/auto.xml

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
<?xml version="1.0" encoding="UTF-8" ?>
2-
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="1">
2+
<dt-example table-type="html-wide" table-class="display nowrap" order="1">
33

44
<css lib="datatables responsive" />
55
<js lib="jquery datatables responsive">
66
<![CDATA[
77
8-
$(document).ready(function() {
9-
$('#example').DataTable();
10-
} );
8+
$('#example').DataTable({
9+
responsive: true
10+
});
1111
1212
]]>
1313
</js>
1414

15+
<js-vanilla>
16+
<![CDATA[
17+
18+
new DataTable('#example', {
19+
responsive: true
20+
});
21+
22+
]]>
23+
</js-vanilla>
24+
1525
<title lib="Responsive">Automatic column hiding</title>
1626

1727
<info><![CDATA[

0 commit comments

Comments
 (0)