I'm trying to get my datatables with dates entered in the D-MMM-YY format to be sorted but it doesn't appear to do so, only by the 1st digit in the date.
For example, it sorts 9-Sep-13 before 1-Jun-20.
A typical table line is as follows:
<tr>
<td>25-Jul-11</td>
<td>Announcement</td>
<td>#</td>
</tr>
My javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'D-MMM-YY');
$('#pn2020').DataTable({
"pageLength": 20,
order: [[ 0, "desc" ]],
} );
} );
</script> <!-- InstanceEndEditable -->
Is this D-MMM-YY format even accepted?
The following works, with your date format.
End result, showing dates sorted in ascending order:
Plug-ins added to the <head> section (in addition to the standard DataTables and jQuery items):
<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>
The test data:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>26-Jul-10</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>25-Mar-11</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2-Jul-11</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>5-Jul-11</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>25-Jul-11</td>
<td>$162,700</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
The datatable configuration, where the date is manipulated:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
targets: 4, // column 5
render: $.fn.dataTable.render.moment( 'D-MMM-YY', 'D-MMM-YY' )
} ]
} );
} );
</script>
This reads in the date in the same format in which it is displayed - which is why the pattern is repeated. For more options, see here.
Related
I want to add a classname "red" to:
all values that are less than 10.
Only for those in column X,Y...
How can I achieve this?
It looks something like this:
You can do it using The callback createdRow as follows :
This callback is executed when a TR element is created (and all TD child elements have been inserted), it used to format a particular row at draw time.
$(document).ready(function () {
$('#example').DataTable({
createdRow: function (row, data, index) {
if (data[2] < 10) {
$('td', row).eq(2).addClass('red');
}
if (data[3] < 10) {
$('td', row).eq(3).addClass('red');
}
},
});
});
td.red {
font-weight: bold;
color: red;
}
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.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.13.1/js/jquery.dataTables.min.js"></script>
<table id="example">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>23</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>16.5454</td>
<td>16.5454</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>15</td>
<td>16.5454</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>316.5454</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
I want to remove the dropdown option from "Show entries" portion in Datatable's header. And need to add checkbox for how many rows to shows per page.
https://ibb.co/ngKVLkk
You need to combine some different techniques to implement this:
Use the DataTables dom option to customize the table layout.
Use a CSS grid layout in combination with the dom option, to ensure the page length control is aligned with the search box.
Generate the page control HTML dynamically so it can be placed in the HTML generated by the dom option.
Set an initial page length.
Add an event listener to respond to page length changes.
Use the DataTables .page.len() function to actually change the page length.
Here is a demo for the above approach:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: '<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
} );
var pageLengths = ['5', '20', '50', '100'];
checkbox_html = pageLengths.map((length, idx) => {
let html = '<input type="radio" class="check-row" name="page_size"';
if (idx === 0) {
return html + ' value="' + length + '" checked>' + length;
} else {
return html + ' value="' + length + '">' + length;
}
}).join(' ');
$("div.dt-left").html(checkbox_html);
var intialPageLen = parseInt($('input[name=page_size]:checked', 'body').val());
table.page.len( intialPageLen ).draw();
$( 'body' ).on( 'click', 'input[name=page_size]', function() {
table.page.len( $( this ).val() ).draw();
});
} );
.check-row {
display: inline-block;
margin: 0 2px 0 8px;
}
div.dt-top-container {
display: grid;
grid-template-columns: auto auto auto;
}
div.dt-left {
}
div.dt-center {
margin: 0 auto;
}
div.dt-right {
margin: 0 0 0 auto;
}
<!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" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Radio Buttons not Check Boxes
I changed your check boxes to radio buttons, since these ensure that only one value is selected at a time.
Additional Notes
Change the page lengths array to whatever you want:
var pageLengths = ['5', '20', '50', '100'];
The HTML for these page lengths is built using the pageLengths.map() logic. The first value in the array is the one which is used for the initial table display.
The dom option is used to manage what gets placed in the top left hand field above the Datatable:
'<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
This is where the CSS grid layout is used.
Finally, the click event is where we re-draw the table, to change the page length:
table.page.len( $( this ).val() ).draw();
I have data in the table, from that table I added a dropdown menu that is used to filter columns based on status.
Where the status in the dropdown menu is:
"All" to display all data.
"Done" to display data with the status "Done"
"In Progress" to display data with the status "In Progress"
"Rejected" to display data with the status "Rejected".
The code I made is like this
Using column().search()
$(document).ready(function() {
var table = $('#example').DataTable({
'sDom': 'lrtip',
'paging': true,
'lengthChange': false,
'info': true,
});
$('select').on('change', function() {
table.column(5).search(this.value).draw()
})
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<p align="right">
<label>Filter :</label>
<select style="color:black;width:235px;" class="w3-input" name="report_type" required="required">
<option value="" selected>All</option>
<option value="Done">Submitted</option>
<option value="Rejected">Rejected</option>
<option value="In Progress">In Progress</option>
</select>
</p>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>Done</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>Done</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>In Progress</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>In Progress</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>In Progress</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>Rejected</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>Done</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>In Progress</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>Rejected</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>Done</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>Done</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>In Progress</td>
</tr>
</tbody>
</table>
I wanted to copy datatables contents to clipboard using a button that is not contained in datatables.
Doing it with a button inside Datatables is very easy with the buttons: ['copyHtml5'] option.
Is it possible to link the onclick() method of a html button to do this?
For example, I did the same with the search filter with this code that links an external html input (myFilter) with Datatables search action:
$("#myFilter").on("keyup", function() {
dataTable.search(this.value).draw();
});
You can do something like this to trigger copy.
var table= $('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy'
]
} );
$("#copycustomButton").on("click", function() {
table.button( '.buttons-copy' ).trigger();
});
.buttons-copy{
display:none !important
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<button id="copycustomButton">
copy
</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
</tr>
</tbody>
</table>
I made a table using DataTables plugin.
I created a column called "Date" wich contains some dates. With the button near "Date" I can order records but I have to use this format for the dates dd/mm/yyyy so the order is wrong.
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="mydata">
<thead>
<tr>
<th>ID</th>
<th>Schedina</th>
<th>Quota</th>
<th>Stake</th>
<th>Data</th>
<th>Risultato</th>
</tr>
</thead>
<tbody>
<tr>
<td>41</td>
<td>12</td>
<td>21</td>
<td>12</td>
<td value="2020-11-15">15/11/2020</td>
<td>In corso</td>
</tr>
<tr>
<td>37</td>
<td>a</td>
<td>4.52</td>
<td>10</td>
<td value="2017-04-07">07/04/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>40</td>
<td>prova 123<br> prova</td>
<td>2.01</td>
<td>15</td>
<td value="2017-01-15">15/01/2017</td>
<td>In corso</td>
</tr>
<tr>
<td>42</td>
<td>oggi</td>
<td>2</td>
<td>21</td>
<td value="2017-01-15">15/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>43</td>
<td>1212dwed</td>
<td>12</td>
<td>12</td>
<td value="2017-01-15">15/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td value="2017-01-14">14/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>38</td>
<td>a</td>
<td>2</td>
<td>12</td>
<td value="2017-01-13">13/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>36</td>
<td>a</td>
<td>1.94</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>35</td>
<td>a</td>
<td>1.95</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Perso</td>
</tr>
<tr>
<td>34</td>
<td>a</td>
<td>1.93</td>
<td>30</td>
<td value="2017-01-12">12/01/2017</td>
<td>Vinto</td>
</tr>
<tr>
<td>33</td>
<td>Nad</td>
<td>1.82</td>
<td>30</td>
<td>12/01/2017</td>
<td>Vinto</td>
</tr>
</tbody>
</table>
<script>
$('#mydata').DataTable( {
responsive: true
} );
</script>
This is why I didn't post it. There is an error in lineno 0 . But in my file i don't have any error
How can I solve this problem?
You are comparing dates as strings, but the strings contain the day at start. Let's implement a helper function:
function helper(input) {
var dateElements = input.split("/");
return dateElements[2] + dateElements[1] + dateElements[0];
}
and use this to convert your elements to their desired format. Then you will be able to compare them, as year will be at the start, month will follow and day will be at the end.