datatables sort
sort on date
by Steve
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.9/sorting/datetime-moment.js"></script>
<table class="display dataTable" id="sort" summary="">
<THEAD>
<TR>
<TH class="header columnsort" width="15%" scope=col>Date/Time</TH>
<TH class="header columnsort" width="22%" scope=col>Committee</TH>
<TH class="noSort sortDisabled" width="30%" scope=col>Meeting purpose</TH>
<TH class="header columnsort" width="17%" scope=col>Location</TH>
<TH class="noSort sortDisabled" width="14%">Additional<BR>Information</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD class="boldDate">dimanche, 28 juillet 2012 11:01</TD>
<TD><A
href="">tes test test</A></TD>
<TD>will meet for the purpose of report writing, as follows:</TD>
<TD>Committee Room 151 </TD>
<TD>(closed session)<BR><A
href="">Watch
Live</A><BR></TD></TR>
<TR>
<TD>mardi, 11 février 2012 11:01</TD>
<TD><A
href="">tes test test</A></TD>
<TD>tes test test</TD>
<TD>Committee Room 1 </TD>
<TD></TD></TR>
<TR>
<TD>dimanche, 17 juillet 2012 11:01</TD>
<TD><A
href="">tes test test</A></TD>
<TD></TD>
<TD>Committee Room 1 </TD>
<TD></TD></TR>
<TR>
<TD>vendredi, 18 septembre 2012 11:01</TD>
<TD><A
href="">tes test test</A></TD>
<TD>tes test test tes test test</TD>
<TD>N/A </TD>
<TD>CANCELLED<BR></TD></TR>
<TR>
<TD>dimanche, 30 juillet 2012 11:01</TD>
<TD><A
href="">Standing
tes test test</A></TD>
<TD>tes test test</TD>
<TD>Committee Room 2 </TD>
<TD></TD></TR>
<TR>
<TD>dimanche, 20 juillet 2011 11:01</TD>
<TD><A
href="">tes test test</A></TD>
<TD>tes test test</TD>
<TD>Committee Room 2...CSS
/*STEVE STYLES*/
th {
background: #eee6b5;
color: 222222;
font-weight: bold;
}
table.dataTable tbody .boldDate{
font-weight:900;
}
td, th, sorting_1{
padding: 6px;
border: 1px solid #eee6b5;
text-align: left;
}
h1.pad {padding: 0em 0 0em 0;}
td, th, sorting_1{
padding: 6px;
border: 1px solid #eee6b5;
text-align: left;
}
span.columnsort{
color: #663333;
}
/***********table heading font color**************/
th.th-color{
font-color:#663333;
}
/**************Single Column*******************/
.singleColumn h2{
border-top-width:0px;
padding:10px 0 5px 0;
}
.singleColumn ul li p{
font-size:100%;
}
.singleColumn h1{
padding-top:5px;
}
.singleColumn a:hover{
background:none;
}
/******** DATATABLES styles forCommittees ***********/
table.dataTable thead th,
table.dataTable thead td {
padding: 10px 18px;
border-bottom: 0px solid #111;
}
table.dataTable thead th{
font-color:#663333;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #ffffff;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
border-top: 0px solid #ddd;
}
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #ffffff;
}
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbf5db;
}
/* Zebra striping on tables*/
table.display tbody tr.even {
background-color: #fbf5db;
}
table.display tbody tr.odd {
background-color: #ffffff;
}
/* Zebra striping on tables*/
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #fbf5db;
}
.dataTables_filter{
padding-bottom:1em;
}
/* Zebra striping on sessional bg...JavaScript
$(document).ready(function(){
moment.locale('fr', {
months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
longDateFormat : {
LT : "HH:mm",
LTS : "HH:mm:ss",
L : "DD/MM/YYYY",
LL : "D MMMM YYYY",
LLL : "D MMMM YYYY LT",
LLLL : "dddd D MMMM YYYY LT"
},calendar : {
sameDay: "[Aujourd'hui à] LT",
nextDay: '[Demain à] LT',
nextWeek: 'dddd [à] LT',
lastDay: '[Hier à] LT',
lastWeek: 'dddd [dernier à] LT',
sameElse: 'L'
},
relativeTime : {
future : "dans %s",
past : "il y a %s",
s : "quelques secondes",
m : "une minute",
mm : "%d minutes",
h : "une heure",
hh : "%d heures",
d : "un jour",
dd : "%d jours",
M : "un mois",
MM : "%d mois",
y : "une année",
yy : "%d années"
},
ordinalParse : /\d{1,2}(er|ème)/,
ordinal : function (number) {
return number + (number === 1 ? 'er' : 'ème');
},
meridiemParse: /PD|MD/,
isPM: function (input) {
return input.charAt(0) === 'M';
},
// in case the meridiem units are not separated around 12, then implement
// this function (look at locale/id.js for an example)
// meridiemHour : function (hour, meridiem) {
// return /* 0-23 hour, given meridiem token and hour 1-12 */
// },
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? 'PD' : 'MD';
},
week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // The week that contains Jan 4th is the first week of the year.
}
});
moment.locale('en');
var localLocale = moment();
localLocale.locale('fr'); // set this instance to use...