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="committee" summary="This table is an index of all Committee Weekly Schedule">
<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>Wednesday, September 30 4:00 pm</TD>
<TD><A
href="">Select
Committee on Sexual Violence and Harassment</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>Tuesday, September 29 9:00 am</TD>
<TD><A
href="">Standing
Committee on Estimates</A></TD>
<TD>will meet to review the 2015-2016 Estimates of the Ministry of Energy,
as follows:</TD>
<TD>Committee Room 1 </TD>
<TD></TD></TR>
<TR>
<TD>Tuesday, September 29 3:45 pm</TD>
<TD><A
href="">Standing
Committee on Estimates</A></TD>
<TD>will meet to review the 2015-2016 Estimates of the Ministry of Energy,
as follows:</TD>
<TD>Committee Room 1 </TD>
<TD></TD></TR>
<TR>
<TD>Wednesday, September 30 3:45 pm</TD>
<TD><A
href="">Standing
Committee on Estimates</A></TD>
<TD>will meet to review the 2015-2016 Estimates of the Ministry of Energy,
as follows:</TD>
...
CSS
/*STEVE STYLES*/
th {
background: #eee6b5;
color: 222222;
font-weight: bold;
}
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 color hover fix*/
table.dataTable.display tbody tr.even...
JavaScript
$(document).ready(function(){
$('#committee').dataTable( {
"paging": false,
"info": false,
} );
});
$(document).ready(function() {
$.fn.dataTable.moment().format("dddd, MMMM DD, h:mm a");// "Sunday, February 14 3:25 pm"
$('#committee').dataTable();
});
moment().format();