I have a table with multiple columns. 1 column contains date in format dd.mm.yyyy (example: 26.05.2021). I'm trying to achieve a default sorting by date.
My table looks like this:
<table id="myTable" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text.</td>
<td>25.06.2021</td> <!-- This is the date column I want to sort by -->
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text</td>
<td>22.07.2020</td> <!-- This is the date column I want to sort by -->
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
So far, I have this JS at the end of my <body> in my HTML file:
<script type="text/javascript" href="https://cdn.datatables.net/plug-ins/1.10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
$('#myTable').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.18/i18n/Slovak.json"
},
columnDefs: [{
type: 'date-eu',
targets: 1
}],
"order": [
[1, "desc"],
[2, "desc"]
],
"pagingType": "first_last_numbers"
});
</script>
The issue is, that this does not order the table correctly. It seems to be ordering only by the day (ignoring month and year), not by the whole date.
Any ideas how to proceed?
I have tried all the available answers I was able to find here and also on the DataTables forums, but there weren't any answers which would fix my issue...
Thank you
Because you have two different date/time formats in your table (one for the column 2 date and one for the column 3 time), I recommend using the ultimate date/time sorting plug-in.
You need these extra resources in the page header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
Then, in the body script, you can define the two formats you need:
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
Formatting options for those two strings are documented here as part of the moment.js library.
DataTables takes care of the rest.
It looks through the list of date/time formats you have provided and automatically fits the correct format to the relevant column data. It then uses that format to ensure the data is sorted chronologically, while leaving the display format unchanged.
A demo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text A</td>
<td>21.06.2021</td>
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text B</td>
<td>22.07.2020</td>
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
<tr>
<td>Some Text C</td>
<td>22.07.2020</td>
<td>15:59</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
$('#example').DataTable( {
order: [
[1, "desc"],
[2, "desc"]
],
} );
} );
</script>
</body>
</html>
Related
Most dates in my table are formatted in mm/dd/yyyy. However, I have two dates that are in mm/dd/yyyy to mm/dd/yyyy format. What is the best way to sort it? The column should only sort on the first date (from date).
Thanks in advance.
Please see my test case here -
https://live.datatables.net/zasupaza/1/edit
$(document).ready(function() {
$.fn.dataTable.moment( 'MM/DD/YYYY');
$('#example_full1').DataTable({
responsive: true,
fixedHeader: true,
order:[[ 0, 'desc' ]]
} );
} );
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th >3</th>
<th>4</th>
</tr>
</thead><tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>
You can use Pre-deformatting method to convert the date range data into orderable data as the following:
$(document).ready(function() {
$.fn.dataTable.ext.type.order['date-range-pre'] = function(date){
var parts = date.split(" - ");
return new Date(parts[0]);
};
$('#example_full1').DataTable({
responsive: true,
fixedHeader: true,
order:[[ 0, 'desc' ]],
columnDefs: [
{
targets: 0,
type: 'date-range'
}
]
} );
} );
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th >3</th>
<th>4</th>
</tr>
</thead><tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>
by defining date-range-pre which format you date range by splitting it then convert first date into date type which is sortable type in addition to ignoring second date
change type of this column to date-range inside columnDefs
Put an hidden div before your cell content (just one if it's a from-to cell) YYYY-MM-DD format and remove the datable.moment function.
https://live.datatables.net/zasupaza/3/edit
Funny, I had the same problem today. For me, it worked to put a data-sort attribute with the timestamp on the td:
<td data-sort="{{ collection.getDateCreated().getTimestamp() }}">
{{ collection.getCreatedAtString() }}
</td>
This will make DataTable to use the value in data-sort rather than the value in the tags. Apparently, DataTables calls this orthogonal data.
You can combine DataTables' support for orthogonal data with some JavaScript to reformat your date string.
In this case, because you have mm/dd/yyyy as your format, we will re-arrange the string to be yyyy/mm/dd - and then we can rely on the natural sort order of the resulting string.
For your longer date strings mm/dd/yyyy to mm/dd/yyyy, we can ignore the second date.
The key point here is: This re-formatting only applies to the data used for sorting. It does not change the data which is displayed to the user, or which is used for searching/filtering.
$(document).ready(function() {
var table = $('#example_full1').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
if (type === 'sort') { // ONLY for data used for sorting
//console.log(data.substring(6, 10) + '/' + data.substring(0, 5));
return data.substring(6, 10) + '/' + data.substring(0, 5);
} else {
return data; // for display and filtering values
}
}
}]
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
<tr>
<td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using bootgrid table. Here I am trying to show the columns based on user preference.
For example, there are 4 columns in the table. If the user uncheck the 3rd column. Remaining 1st, 2nd and 4th column will be visible.
My issue is that, after the page load, bootgrid shows all the columns. But I want to show only the columns which is preferred by users before page load.
$(function() {
$('#data-table').bootgrid();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.1.1/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.1.1/dist/js/bootstrap.min.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.js'>
</script>
<table class="table table-bordered" id="data-table">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender" data-visible="false">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
<th data-column-id="imgsrc"
data-identifier="true"
data-type="string"
data-visible="false">Img src</th>
<th data-column-id="image" data-formatter="link">Link</th>
<th data-column-id="commands"
data-formatter="commands"
data-sortable="false">Commands</th>
</tr>
</thead>
<tbody>
<tr>
<td>10238</td>
<td>eduardo#pingpong.com</td>
<td>14.10.2013</td>
<td>
https://placeholdit.imgix.net/~text?txtsize=23
</td>
</tr>
<tr>
<td>10243</td>
<td>eduardo#pingpong.com</td>
<td>19.10.2013</td>
<td>https://placeholdit.0&h=50</td>
</tr>
<tr>
<td>10248</td>
<td>eduardo#pingpong.com</td>
<td>24.10.2013</td>
<td>https://placeholdit.imgix.n&h=50</td>
</tr>
</tbody>
</table>
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>
i tried the Tabledit plugin for jquery. It works fine. But if I want to make an edit field as a select field it doesn't work. The edit field is also shown as an text input field and not as a select field. What Im doing wrong.
$('#mytable').Tabledit({
columns: {
identifier: [0, "id"],
editable: [
[1, 'car'],
[2, 'color', '{"1": "red", "2": "green"}']
]
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit#1.0.0/jquery.tabledit.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th>id</th>
<th>Car</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ferrari</td>
<td>Red</td>
</tr>
<tr>
<td>2</td>
<td>Lotus</td>
<td>Green</td>
</tr>
</tbody>
</table>
I am getting the below error when I use the jQuery data table.
Error: Unable to get property 'mData' of undefined or null reference
Code
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#empTable').DataTable();
} );
</script>
<table id="empTable" class="display" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>AAAAA</td>
<td>32</td>
<td>Colombo</td>
</tr>
<tr>
<td>BBBBB</td>
<td>29</td>
<td>Kandy</td>
</tr>
</table>
Please suggest me how to fix this issue?
Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>
HTML structures in the table needs to match.
For instance, <th> tags in your <thead> with the <tr>'s in the <tbody>. That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>