I am using jQuery DataTables and I have multiple columns with dates, the current data is in this format 2020-06-18 14:32:45.707 and I want to format it and display it as 18/06/2020 14.32.
I applied datetime plugin in DataTables, but still can't make it work.
Currently I am using :
render: function(data) {
return moment(data).format('DD/MM/YYYY HH:mm');
}
Which is working fine. But I want to use render:
render: $.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
I have included moment.js and datetime.js as the documentation says and I should apply:
$.fn.dataTable.render.moment(to);
My dates are shown as 'invalid date' in my table when i use this method.
below is a demo.
Could you please explain me what am I doing wrong with?:
$.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
I have the other method working, but I want to learn from my mistakes as I spend much time investigating and couldn't figure out the issue. Thank you very much.
$(document).ready(function() {
$('#example').DataTable({
"columnDefs": [{
//render: $.fn.dataTable.render.moment( 'DD/MM/YYYY HH:mm' )
"render": function(data) {
return moment(data).format('DD/MM/YYYY HH:mm');
},
"targets": 1
}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<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.21/dataRender/datetime.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>date before format</th>
<th>date after format</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-06-18 14:32:45.707</td>
<td>2020-06-18 14:32:45.707</td>
</tr>
</tbody>
</table>
Your issue is here:
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
}
The default FROM is 'YYYY-MM-DD', you need to specify YOUR source format.
const FROM_PATTERN = 'YYYY-MM-DD HH:mm:ss.SSS';
const TO_PATTERN = 'DD/MM/YYYY HH:mm';
$(document).ready(function() {
$('#example').DataTable({
columnDefs: [{
render: $.fn.dataTable.render.moment(FROM_PATTERN, TO_PATTERN),
targets: 1
}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<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.21/dataRender/datetime.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>date before format</th>
<th>date after format</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-06-18 14:32:45.707</td>
<td>2020-06-18 14:32:45.707</td>
</tr>
</tbody>
</table>
Related
I created a table using datatables and on footer I added anempty dropdown select using Bootstrap-select as below :
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
When my datatable is created, I want to add the distinct values of that column as options in my select.
The issue is : the datatable is drawn without errors but the select is not populated. It still shows empty but when i use inspect on browser I see the options are already inside the select.
I used emptybefore append and tried html instead of append but still not showing the options. I also tried footerCallback instead of initComplete.
When I add the options manually inside my select in the html, it works fine. it looks like in datatable the footer is loaded before the body that's why it's not showing the options when it's displayed before the body is ready.
Any suggestions please how I could fixe it ? Thank you very much.
$(document).ready(function() {
$('.selectpicker').selectpicker();
$('#example').DataTable({
"lengthChange": false,
"info": false,
"paging": false,
"searching": false,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
$('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } );
} ); } }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>Austria</td></tr>
<tr><td>Japan</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>Finland</td></tr>
<tr><td>India</td></tr>
<tr><td>USA</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>France</td></tr>
<tr><td>Austria</td></tr>
</tbody>
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
</table>
Your mistake was initiating your selectpicker before populating it with options, whereas the opposite is recommended in their reference docs.
Following is a fixed live-demo:
$('#example').DataTable({
lengthChange: false,
info: false,
paging: false,
searching: false,
initComplete: function(){
const table = this.api();
table.columns().every(function(){
const title = $(this.header()).text();
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '');
$('.selectpicker').append(options).selectpicker()
});
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /><link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"><script src="https://code.jquery.com/jquery-3.5.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script><script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script><table id="example" class="table table-bordered" style="width:100%"><thead><tr><th>Country</th></tr></thead><tbody><tr><td>Austria</td></tr><tr><td>Japan</td></tr><tr><td>Sweden</td></tr><tr><td>Finland</td></tr><tr><td>India</td></tr><tr><td>USA</td></tr><tr><td>Sweden</td></tr><tr><td>France</td></tr><tr><td>Austria</td></tr></tbody><tfoot><tr><th><select class="selectpicker" multiple></select></th></tr></tfoot></table>
You will need to initialize the selectpicker after you append the data not before.
$(document).ready(function() {
$('#example').DataTable({
"lengthChange": false,
"info": false,
"paging": false,
"searching": false,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
column.data().unique().sort().each( function ( d, j ) {
$('.selectpicker').append( '<option value="'+d+'">'+d+'</option>' ) } );
} ); } });
// initialize the selectpicker after appending options
$('.selectpicker').selectpicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>Austria</td></tr>
<tr><td>Japan</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>Finland</td></tr>
<tr><td>India</td></tr>
<tr><td>USA</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>France</td></tr>
<tr><td>Austria</td></tr>
</tbody>
<tfoot>
<tr>
<th><select class="selectpicker" multiple></select></th>
</tr>
</tfoot>
</table>
i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events
I am trying to sort in datatable but, i couldn't understand how to do it. let me show what i tired to do with my code.
$(document).ready(function() {
$('#table').DataTable();
} );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
#if($trades)
#foreach($trades as $trade)
<tbody>
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
</tbody>
#endforeach
#endif
</table>
I worked hard but unable to find what i have not done.
I think you need to move your #foreach to be inside of your <tbody> like this:
<tbody>
#foreach($trades as $trade)
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
#endforeach
</tbody>
To get the sorting to work, you'll have to add an option to your javascript like this:
$(document).ready(function() {
$('#table').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Which will order your table by the 4th column (since the 3 in the above example starts counting indexes at 0) in descending order. Reference - https://datatables.net/examples/basic_init/table_sorting.html
I want to format 2016-09-14T13:46:39+0000 to DD/MM/YYYY. The data is coming from a JSON file/url into a bootstrap-table. Is there a way to format this using bootstrap-table or javascript?
See jsfiddle
Thanks,
<table data-toggle="table"
data-url="https://api.myjson.com/bins/44564"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="createdAt">Created At</th>
</tr>
</thead>
Check this will resolve your issue.. Am using moment js to format data..
..
function dateFormat(value, row, index) {
return moment(value).format('DD/MM/YYYY');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<table data-toggle="table"
data-url="https://api.myjson.com/bins/44564"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="createdAt" data-formatter="dateFormat">Created At</th>
</tr>
</thead>
</table>
I want to add rows to the datatable when the page is displayed using a javascript array.
I am trying to figure this out, but the row does not get add. Any help is appreciated..
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Following the examples on the datatables.net web site for the latest version (1.10.x):
$('#dataTables-example').DataTable().row.add([
'1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
From the API, this is one of the ways to add rows:
var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();
Demo#Fiddle
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.
In acknowledgement that the above code structure isn't always particularly
attractive, DataTables as a retrieve [DT] option which can be used to tell
DataTables that you are aware that the initialisation options can't be
changed after initialisation, and that should that occur, that you
just want the DataTable instance to be returned.
This optional parameter can provide a short-cut to the explicit check
using $.fn.dataTable.isDataTable() as above when obtaining a
DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );
Maybe you can generate the row before and then append it to the tbody just using jQuery
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");