Datatable Child Row - javascript

I am trying to recreate demo
My jsfiddle is here
Frontend Javascript
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
orderable: false,
targets: 0
}],
order: [1, 'asc']
});
});
HTML
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th></th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
For unknown reason, the details row does not appear (neither does the +/- signs on the left most column)
What am I doing wrong?


You have two Problems:
You are not using the right libraries
You are using the responsive extension that hides automatically data based on the width. So you have to add more columns so the data overflows.
See the the updated JSfiddle.
Look at the used external resources to see the correct libraries to import.

Related

How to sort a jQuery DataTables table using a separate column?

Is it possible to sort a DataTables table using a separate column? In the example below, the table is sorted using the first column by default, which is also hidden. Even though the third column is a date column, it is not in a numerical format. When trying to sort the table using the third column, it is sorting alphabetically rather than by date.
How can the table be sorted by date correctly using the third column? Is it possible to sort the table using the hidden first column when toggling the third column?
$('#table').DataTable({
responsive: true,
"order": [[0, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Numerical date</th>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>20200801</td>
<td>Record 1</td>
<td>August 1, 2020</td>
</tr>
<tr>
<td>20200701</td>
<td>Record 2</td>
<td>July 1, 2020</td>
</tr>
<tr>
<td>20200501</td>
<td>Record 3</td>
<td>May 1, 2020</td>
</tr>
<tr>
<td>20200401</td>
<td>Record 4</td>
<td>April 1, 2020</td>
</tr>
</tbody>
</table>

You can add the following. You should be able to sort by date correctly:
"aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
See it in action in the demo below:
$('#table').DataTable({
responsive: true,
"order": [[2, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
"aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Numerical date</th>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>20200801</td>
<td>Record 1</td>
<td>August 1, 2020</td>
</tr>
<tr>
<td>20200701</td>
<td>Record 2</td>
<td>July 1, 2020</td>
</tr>
<tr>
<td>20200501</td>
<td>Record 3</td>
<td>May 1, 2020</td>
</tr>
<tr>
<td>20200401</td>
<td>Record 4</td>
<td>April 1, 2020</td>
</tr>
</tbody>
</table>

You can give tds a data-sort attribute. Then you wouldn't need the first column at all.
$('#table').DataTable({
responsive: true,
"order": [
[1, "desc"]
]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>Record 1</td>
<td data-sort="20200801">August 1, 2020</td>
</tr>
<tr>
<td>Record 2</td>
<td data-sort="20200701">July 1, 2020</td>
</tr>
<tr>
<td>Record 3</td>
<td data-sort="20200501">May 1, 2020</td>
</tr>
<tr>
<td>Record 4</td>
<td data-sort="20200401">April 1, 2020</td>
</tr>
</tbody>
</table>

jQuery DataTables: Set a search filter for a named column upon initialization

Basically, I want to achieve this command upon initialization of my dataTables.
$('#trainings-table').DataTable().column('status:name').search('planned').draw();
So, what I've tried:
$('#trainings-table').DataTable({
columnDefs: [{
targets: 'status:name',
search: 'planned'
},
]
})
But this didn't work. I also tried changing the target to the exact column number (e.g. targets: 2) and not using this named target, but that didn't seem to be the problem.
My DataTable:
<table id="trainings-table">
<thead>
<tr>
<th data-name="name">description</th>
<th data-name="status">Status</th>
<th data-name="date">date</th>
<th date-name="duration">days</th>
</tr>
</thead>
<tbody>
<!-- Expected behaviour: This row below should be hidden after initialization -->
<tr>
<td>Training 1</td>
<td>Completed</td>
<td>28.04.2019</td>
<td>1 day</td>
</tr>
<!-- Expected behaviour: Only show row below after initialization -->
<tr>
<td>Training 2</td>
<td>Planned</td>
<td>05.05.2019</td>
<td>2 days</td>
</tr>
...
</tbody>
</table>

You need to set name property with columns or columnDefs option.
Here is the code example:
$(document).ready(function () {
var table = $('#trainings-table').DataTable({
dom: 't',
columns: [
{name: 'name'},
{name: 'status'},
{name: 'date'},
{name: 'duration'}
],
searchCols: [
null,
{search: 'Planned'},
null,
null
]
});
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="trainings-table">
<thead>
<tr>
<th data-name="name">description</th>
<th data-name="status">Status</th>
<th data-name="date">date</th>
<th date-name="duration">days</th>
</tr>
</thead>
<tbody>
<!-- Expected behaviour: This row below should be hidden after initialization -->
<tr>
<td>Training 1</td>
<td>Completed</td>
<td>28.04.2019</td>
<td>1 day</td>
</tr>
<!-- Expected behaviour: Only show row below after initialization -->
<tr>
<td>Training 2</td>
<td>Planned</td>
<td>05.05.2019</td>
<td>2 days</td>
</tr>
</tbody>
</table>

DataTables iniating multiple child tables with columnDefs intact

Background: I have 7 DataTables being created by a PHP loop (HTML is created directly on the page - not sourced from AJAX or anywhere else). Within these summary level DataTables, I have a further 6 detail level DataTables in a nested loop (one for each of the summary level tables - apart from one). These are in the last column of each summary table and using the responsive option I am able to have the content of the detail tables pushed to a child row as per https://datatables.net/examples/api/row_details.html
Problem: I am trying to initiate each child (detail) table in the initComplete: function(){} of the parent table. It seems to be doing something although the table doesn't retain any of the DataTables libraries functionality (column definition widths for example).
My main issue is that is ignoring my DataTable options (setting widths via columnDefs in this case is vital:
Am I missing something? Is there a reason it's choosing to override/ignore my column widths. The parent table allows responsive and columnDefs.
See snippet for example:
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2]
},
{
"className": "dt-center",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [
//IGNORED????
{
'width': '10%',
'targets': [0]
},
{
'width': '25%',
'targets': [1]
},
{
'width': '25%',
'targets': [2]
},
{
'width': '40%',
'targets': [3]
},
{
"className": "dt-center",
"targets": "_all"
},
],
ordering: true,
sorting: true,
initComplete: function() {
console.log("SUB TABLE INIT COMPLETE");
},
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heading one</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

What you're looking to do isn't by default part of datatables, but you can hack your way through it by adding a maximum for width for the classes dtr-details and compact
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2, 3]
},
{
"className": "dt-center",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable();
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
.dtr-details,
.compact {
width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heading one</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Also note that I changed your 'targets': [1, 2] to 'targets': [1, 2, 3] and you don't need any options in the child datatables, as they won't be taken into account.
If you add an id to the inner table, for example innerTable you could then just add this css to make the first column's width 3% :
#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
width: 3%!important;
}
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2, 3]
},
{
"className": "dt-left",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable();
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
.dtr-details,
.compact {
width: 100% !important;
}
#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
width: 3% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table id="innerTable" class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Id</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
<tr>
<td>2</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
<tr>
<td>3</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFiddle : https://jsfiddle.net/6fp3kbnh/

Sorting table with rowspans

Is there a way to sort a table with multiple rowspans? I was trying a plugin in this jsFiddle, but it seems age does not get sorted correctly. Is there a way to sort an HTML table with rowspans? I need to have this table sorted with rowspan.
HTML
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();

It doesn't like your "expand-child" class. If you remove that, then it seems to sort just fine. What is that class doing?

Use Data-tables, it has all functionality: https://datatables.net/
$('.tablesorter').DataTable( {
"columnDefs": [ {
"targets": [ 0, 2 ],
"orderable": false
} ]
});

jQuery datatable table inside table causing mData undefined

In one of my projects I am using datatables. This is one column structure in my table which is causing an error:
<th>
<table class="table table-bordered table-condesed">
<thead>
<tr>
<th colspan="7" class="text-center">Day Run</th>
</tr>
</thead>
<tbody>
<tr>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
<td>S</td>
</tr>
</tbody>
</table>
</th>
Also this is the respective column:
<td>
<table class="table table-bordered">
<tbody>
<tr>
<td tabindex="0">N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>N</td>
<td>Y</td>
</tr>
</tbody>
</table>
</td>
I don't know why but this is throwing an error when initialized. This is the error I am facing.
Uncaught TypeError: Cannot read property 'mData' of undefined
I don't see anything wrong here. Any idea why its does not work?
Here is the live demo Demo

This is because you are initializing datatable by using class like:
$('.table').dataTable({searching: false, paging: false, responsive: true});
and the column definition are different for both the table, I think this is the issue.
Do one thing, provide different id to both the table and initiate datatable with those id's

Categories

Resources