DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<table id="table">
    <thead>
    <th>Range</th>
    </thead>
    <tbody>
    <tr>
        <td data-sort="30.04.2020 22:00">30.04.2020 22:00-23:00</td>
    </tr>
    <tr>
        <td data-sort="30.04.2020 23:00">30.04.2020 23:00-00:00</td>
    </tr>
    <tr>
        <td data-sort="01.05.2020 00:00">01.05.2020 00:00-01:00</td>
    </tr>
    <tr>
        <td data-sort="01.05.2020 01:00">01.05.2020 01:00-02:00</td>
    </tr>
    </tbody>
</table>

JavaScript

(function (factory) {
	if (typeof define === "function" && define.amd) {
		define(["jquery", "moment", "datatables.net"], factory);
	} else {
		factory(jQuery, moment);
	}
}(function ($, moment) {

$.fn.dataTable.moment = function ( format, locale, reverseEmpties ) {
	var types = $.fn.dataTable.ext.type;
	// Add type detection
	types.detect.unshift( function ( d ) {
		if ( d ) {
    console.log('type detection', d)
			// Strip HTML tags and newline characters if possible
			if ( d.replace ) {
				d = d.replace(/(<.*?>)|(\r?\n|\r)/g, '');
			}

			// Strip out surrounding white space
			d = $.trim( 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 ) {
		if ( d ) {
			// Strip HTML tags and newline characters if possible
			if ( d.replace ) {
				d = d.replace(/(<.*?>)|(\r?\n|\r)/g, '');
			}

			// Strip out surrounding white space
			d = $.trim( d );
		}
		
		return !moment(d, format, locale, true).isValid() ?
			(reverseEmpties ? -Infinity : Infinity) :
			parseInt( moment( d, format, locale, true ).format( 'x' ), 10 );
	};
};

}));
$.fn.dataTable.moment('DD.MM.YYYY HH:mm');
$('#table').dataTable();