i am trying to modify the layout datatables generate by default. like move the filter search bar below and table length dropdown menu below and etc.. basically custom style the whole table but i cant understand how i can. i checked the documentation on the datatables website but cant seem to understand. below is my code:
html:
<table class="table table-bordered table-striped table-condensed" id="ray-table">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() { /* Build the DataTable with third column using our custom sort functions */
$('#ray-table').dataTable({
"aaSorting": [[0, 'asc'], [1, 'asc']],
"aoColumnDefs": [
{
"sType": 'string-case',
"aTargets": [2]}
]
});
});
Use the sDom options, something like:
$('#ray-table').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"sDom": "<tlfrip>",
"aoColumnDefs": [
{ "sType": 'string-case', "aTargets": [ 2 ] }
]
} );
Related
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>
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/
Here is the template, I have copied the contents for the bower_components and dist folders. I also did all the linking and requiring I need or well that I can find to. All requires work no 404's only a status code 200. My code is as follows:
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0
</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0
</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5
</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
I get the table to show fine but non of the search, show X entries, pagination or anything else like that. It seems like I am copying the Hover Data Table but the code shows it is the Data Table With Full Features. I have also included the small script on the page near the bottom at line 1631-1643 it is this:
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});
I have tried moving the files aroun
Excuse the poor code styling, it should still give a proper idea.
in your script you have set false to "searching"
try to use "true"
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : true, // change this one
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});
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
} ]
});
I have a table which is dynamically generated. So have no idea on which columns the textbox or dropdown will be present and how many textbox's will be present. Now for each row in the last column there is a details button. On clicking that button I want the data from all cells including the textbox values using jQuery.
For displaying I have hardcoded the table cell values.
My table is as:
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"/></td>
<td>Internet Explorer 4.0</td>
<td><select><option value="1">1</option>
<option value="2">2</option></select>
</td>
<td> 4</td>
<td> A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td><select><option value="1">1</option>
<option value="2">2</option></select></td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
</tbody>
</table>
And the script goes as:
var table = $('#example').DataTable({
ordering: false,
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='addbtn'>Add</button>"
} ]
});
on button click I need to get the row data as:
var rowdata=[];
rowdata=table.row(3).data();
Now using this I get all the cell values of the row except the textbox values, I get them blank. Now I need to copy the complete row along with the html elements and their values on a button click so that I can create a row in other table and display the values.
Hope this helps..
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"/></td>
<td>Internet Explorer 4.0</td>
<td><select><option value="1">1</option>
<option value="2">2</option></select>
</td>
<td> 4</td>
<td> A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td><select><option value="1">1</option>
<option value="2">2</option></select></td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
</tbody>
</table>
<script>
$( document ).ready(function() {
$( ".addbtn" ).click(function() {
console.log( "add button clicked" );
var rowData = 0;
var t = 0;
$(this).parent().prevAll().each(function(){
if ($(this).find('input').length) {
var thisInput = $(this).find('input');
rowData += parseFloat(thisInput.val()) || 0;
console.log(thisInput.val());
}
else if($(this).find('select').length) {
console.log("td has select box");
var thisInput = $(this).find('select');
rowData += parseFloat(thisInput.val()) || 0;
console.log(thisInput.val());
}
else {
console.log($(this).text());
rowData += parseFloat($(this).text(),0) || 0;
}
});
rowData = rowData.toFixed(2);
console.log("total = " + rowData);
});
});
</script>