Fixed date column sorting.

This commit is contained in:
Christian P. MOMON 2021-06-06 04:29:08 +02:00
parent d7fc746719
commit 3646bb4d74
7 changed files with 97 additions and 14 deletions

View file

@ -28,6 +28,7 @@
<li>Quentin Duchemin</li> <li>Quentin Duchemin</li>
<li>Fabrice61</li> <li>Fabrice61</li>
<li>Thomas @TConstans</li> <li>Thomas @TConstans</li>
<li>@labecasse</li>
</ul> </ul>
</body> </body>
</html> </html>

View file

@ -45,14 +45,18 @@
</table> </table>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$('#organizations').DataTable( $(document).ready(function()
{ {
paging: false, $.fn.dataTable.moment( 'DD/MM/YYYY' );
ordering: true,
"order": [[ 2, "desc" ]], $('#organizations').DataTable(
language: dataTableFrench, {
"columns": [null, null, null, null, null, { "sType": "date" } ] paging: false,
}); ordering: true,
"order": [[ 2, "desc" ]],
language: dataTableFrench
});
} );
</script> </script>
</body> </body>
</html> </html>

View file

@ -90,6 +90,7 @@
</table> </table>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$.fn.dataTable.moment( 'DD/MM/YYYY' );
$('#propertyFileListTable').DataTable( $('#propertyFileListTable').DataTable(
{ {
paging: false, paging: false,

View file

@ -133,14 +133,17 @@
</table> </table>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$('#serviceListTable').DataTable( $(document).ready(function()
{ {
paging: false, $.fn.dataTable.moment( 'DD/MM/YYYY' );
ordering: true,
"order": [[ 2, "desc" ]], $('#serviceListTable').DataTable(
language: dataTableFrench, {
"columns": [null, null, null, null, null, null, null, null, null, null, paging: false,
null, null, null, null, null, null, null, null, null, null, { "sType": "date" } ] ordering: true,
"order": [[ 2, "desc" ]],
language: dataTableFrench
});
}); });
</script> </script>
</body> </body>

View file

@ -0,0 +1,70 @@
/**
* This plug-in for DataTables represents the ultimate option in extensibility
* for sorting date / time strings correctly. It uses
* [Moment.js](http://momentjs.com) to create automatic type detection and
* sorting plug-ins for DataTables based on a given format. This way, DataTables
* will automatically detect your temporal information and sort it correctly.
*
* For usage instructions, please see the DataTables blog
* post that [introduces it](//datatables.net/blog/2014-12-18).
*
* @name Ultimate Date / Time sorting
* @summary Sort date and time in any format using Moment.js
* @author [Allan Jardine](//datatables.net)
* @depends DataTables 1.10+, Moment.js 1.7+
*
* @example
* $.fn.dataTable.moment( 'HH:mm MMM D, YY' );
* $.fn.dataTable.moment( 'dddd, MMMM Do, YYYY' );
*
* $('#example').DataTable();
*/
(function (factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "moment", "datatables.net"], factory);
} else {
factory(jQuery, moment);
}
}(function ($, moment) {
function strip (d) {
if ( typeof d === 'string' ) {
// Strip HTML tags and newline characters if possible
d = d.replace(/(<.*?>)|(\r?\n|\r)/g, '');
// Strip out surrounding white space
d = d.trim();
}
return d;
}
$.fn.dataTable.moment = function ( format, locale, reverseEmpties ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
d = strip(d);
// Null and empty values are acceptable
if ( d === '' || d === null ) {
return 'moment-'+format;
}
return moment( d, format, locale, true ).isValid() ?
'moment-'+format :
null;
} );
// Add sorting method - use an integer for the sorting
types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
d = strip(d);
return !moment(d, format, locale, true).isValid() ?
(reverseEmpties ? -Infinity : Infinity) :
parseInt( moment( d, format, locale, true ).format( 'x' ), 10 );
};
};
}));

File diff suppressed because one or more lines are too long

View file

@ -12,6 +12,8 @@
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/> <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script> <script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script src="DataTables/datatables.french.js"></script> <script src="DataTables/datatables.french.js"></script>
<script type="text/javascript" src="DataTables/moment.min.js"></script>
<script type="text/javascript" src="DataTables/datetime-moment.js"></script>
</head> </head>
<body> <body>
<div style="margin: 5px 10px 10px 10px;"> <div style="margin: 5px 10px 10px 10px;">