Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to sort by Date with DataTables jquery plugin?

I am using the datatables jquery plugin and want to sorty by dates.

I know they got a plugin but I can't find where to actually download it from

http://datatables.net/plug-ins/sorting

I believe I need this file: dataTables.numericComma.js yet I can't find it anywhere and when I download datatables it does not seem to be in the zip file.

I am also not sure if I need to make my own custom date sorter to pass into this plugin.

I am trying to sort this format MM/DD/YYYY HH:MM TT(AM |PM)

Thanks

Edit

How can I change this to sort by MM/DD/YYYY HH:MM TT(AM |PM) and change it to U.S date?

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {     var ukDatea = a.split('/');     var ukDateb = b.split('/');      var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;     var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;      return ((x < y) ? -1 : ((x > y) ?  1 : 0)); };  jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {     var ukDatea = a.split('/');     var ukDateb = b.split('/');      var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;     var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;      return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); }; 
like image 588
chobo2 Avatar asked May 19 '10 01:05

chobo2


People also ask

How to sort date in dataTable using jQuery?

function parseDate(a) { var ukDatea = a. split('/'); return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1; } jQuery. extend( jQuery.

How add sorting to dataTable using jQuery?

Versions 1.10+ should use the following syntax: $('table'). dataTable({ "pageLength": -1, //display all records "order": [[ 0, "desc" ]] // Sort by first column descending });

How do you sort DataTables with date in descending order?

date format should be YYYY-MM-DD. sort it *"order": [[ 3, "desc" ]] * and hide the td, th display none.

What is Aocolumns in jQuery dataTable?

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7).


2 Answers

Date Sort - with a hidden element

Convert the date to the format YYYYMMDD and prepend to the actual value (MM/DD/YYYY) in the <td>, wrap it in an element, set style display:none; to the elements. Now the date sort will work as a normal sort. The same can be applied to date-time sort.

HTML

<table id="data-table">    <tr>      <td><span>YYYYMMDD</span>MM/DD/YYYY</td>    </tr> </table> 

CSS

#data-table span {     display:none;  } 
like image 199
Anulal S Avatar answered Sep 30 '22 18:09

Anulal S


You should make use of the HTML5 Data Attributes. https://www.datatables.net/examples/advanced_init/html5-data-attributes.html

Just add the data-order element to your td element.
No plugins required.

<table class="table" id="exampleTable">     <thead>         <tr>             <th>Firstname</th>             <th>Sign Up Date</th>         </tr>     </thead>      <tbody>          <tr>             <td>Peter</td>             <td data-order="2015-11-13 12:00">13. November 2015</td>         </tr>         <tr>             <td>Daniel</td>             <td data-order="2015-08-06 13:44">06. August 2015</td>         </tr>         <tr>             <td>Michael</td>             <td data-order="2015-10-14 16:12">14. October 2015</td>         </tr>     </tbody> </table>   <script>     $(document).ready(function() {         $('#exampleTable').DataTable();     }); </script> 
like image 29
RenRen Avatar answered Sep 30 '22 16:09

RenRen