0
我正在使用sorttable.js對從我們的Mysql數據庫中提取的表進行排序。數據庫有我們提供的課程的開始和結束日期。排序工作很好，但我只注意到，按日期排序時，即使年份較早（即2015年和2016年），總是會在10-12月結束，以便例如10/01/15顯示在底部之後16年1月1日。我知道它必須是簡單的調整，但我一直無法弄清楚在哪裏或如何。我不是很熟練的JavaScript，可以使用一點點的幫助。有人能告訴我我做錯了什麼嗎？使用sorttable.js進行日期排序，按年份然後按月然後按日期排序
/**
*
* Sortable HTML table
* http://www.webtoolkit.info/
*
**/
window.onload = function() {
(document.getElementsByTagName('th')[1]).click();
};
function SortableTable (tableEl) {
this.tbody = tableEl.getElementsByTagName('tbody');
this.thead = tableEl.getElementsByTagName('thead');
this.tfoot = tableEl.getElementsByTagName('tfoot');
this.getInnerText = function (el) {
if (typeof(el.textContent) != 'undefined') return el.textContent;
if (typeof(el.innerText) != 'undefined') return el.innerText;
if (typeof(el.innerHTML) == 'string') return el.innerHTML.replace(/<[^<>]+>/g,'');
}
this.getParent = function (el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
return el;
else
return this.getParent(el.parentNode, pTagName);
}
this.sort = function (cell) {
var column = cell.cellIndex;
var itm = this.getInnerText(this.tbody[0].rows[1].cells[column]);
var sortfn = this.sortCaseInsensitive;
if (itm.match(/\d\d[-]+\d\d[-]+\d\d\d\d/)) sortfn = this.sortDate; // date format mm-dd-yyyy
if (itm.replace(/^\s+|\s+$/g,"").match(/^[\d\.]+$/)) sortfn = this.sortNumeric;
this.sortColumnIndex = column;
var newRows = new Array();
for (j = 0; j < this.tbody[0].rows.length; j++) {
newRows[j] = this.tbody[0].rows[j];
}
newRows.sort(sortfn);
if (cell.getAttribute("sortdir") == 'down') {
newRows.reverse();
cell.setAttribute('sortdir','up');
} else {
cell.setAttribute('sortdir','down');
}
for (i=0;i<newRows.length;i++) {
this.tbody[0].appendChild(newRows[i]);
}
}
this.sortCaseInsensitive = function(a,b) {
aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]).toLowerCase();
bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]).toLowerCase();
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
}
this.sortDate = function(a,b) {
aa = thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]);
bb = thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]);
date1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
date2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
if (date1==date2) return 0;
if (date1<date2) return -1;
return 1;
}
this.sortNumeric = function(a,b) {
aa = parseFloat(thisObject.getInnerText(a.cells[thisObject.sortColumnIndex]));
if (isNaN(aa)) aa = 0;
bb = parseFloat(thisObject.getInnerText(b.cells[thisObject.sortColumnIndex]));
if (isNaN(bb)) bb = 0;
return aa-bb;
}
// define variables
var thisObject = this;
var sortSection = this.thead;
// constructor actions
if (!(this.tbody && this.tbody[0].rows && this.tbody[0].rows.length > 0)) return;
if (sortSection && sortSection[0].rows && sortSection[0].rows.length > 0) {
var sortRow = sortSection[0].rows[0];
} else {
return;
}
for (var i=0; i<sortRow.cells.length; i++) {
sortRow.cells[i].sTable = this;
sortRow.cells[i].onclick = function() {
this.sTable.sort(this);
return false;
}
}
}
以下是結果頁面
<script src="/jscript/sorttable.js"></script>
<style type="text/css">table.sort-table th:not(.sort-table_sorted):not(.sort-table_sorted_reverse):not(.sort-table_nosort):after {
content: " \25B4\25BE"
}
thead .arrow {font-family: webdings; color: black; padding: 0; font-size: 10px;
height: 11px; width: 10px; overflow: hidden;
margin-bottom: 2; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;}
/*nice vertical positioning :-) */
table.sort-table {
font: Icon;
border: 1px Solid ThreeDShadow;
background: Window;
color: WindowText;
}
table.sort-table thead {
background: ButtonFace;
}
table.sort-table td {
padding: 2px 5px;
}
table.sort-table thead td {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
cursor: default;
}
table.scheduletable thead td:active {
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
padding: 3px 4px 1px 6px;
}
table.scheduletable thead td[_sortType=None]:active {
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
padding: 2px 5px;
}
table.sort-arrow {
width: 11px;
height: 11px;
background-position: center center;
background-repeat: no-repeat;
margin: 0 2px;
}
table.sort-arrow.descending {
background-image: url("/jscript/downsimple.png");
}
table.sort-arrow.ascending {
background-image: url("/jscript/upsimple.png");
}
</style>
<table id="scheduletable" style="border-style: none; width:450; font-size :10px;" class="sort-table">
<thead>
<tr valign="top">
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=cid">-->Course ID</a><br></th>
<th scope="col" bgcolor="#E0E0E0" style="width: 12px"><!--<a href="/schedules?orderby=cname">-->Course name</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=credits">-->Credits</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=method">-->Type</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=sdate">-->Start date</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=edate">-->End date</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=days">-->Days</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=stime">-->Start time</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=etime">-->End time</a></th>
<th scope="col" bgcolor="#E0E0E0"><!--<a href="/schedules?orderby=instructor">-->Instructor</a></th>
</tr>
</thead>
<tbody>
<?php foreach($result as $course): ?>
<?php
$color="#FFFFFF";
if(!empty($course->sdate) && strtotime($course->sdate) < $now) {
$color = $color_in_progress;
}
if(in_array(strtolower(trim($course->method)), array("online", "web"))) {
$color = $color_online;
}
$test = strpos($course->cid, 'WH');
if($test !== FALSE) {
$color = $color_hybrid;
}
$testtime = explode(':', $course->stime);
if(!empty($course->stime)) {
if((int)$testtime[0] >= '16'){
$color = $color_evening;
}
}
?>
<tr bgcolor="<?=$color?>">
<td align="center">
<a href="/courses/?id=<?= $course->cid ?>">
<?= $course->cid ?>
</a>
</td>
<td class="name" style="width: 1.5">
<?= $course->cname ?>
</td>
<td class="small" align="center">
<?= $course->credits ?>
<?= ("COMP100 CE0" == $course->cid) ? '.50' : null?>
</td>
<td align="center">
<?= $course->type?>
</td>
<td align="center">
<?= date("m/d/y", strtotime($course->sdate))?>
</td>
<td align="center">
<?= date("m/d/y", strtotime($course->edate))?>
</td>
<td align="center">
<?= $course->days ?>
</td>
<td align="center">
<?= date("h:i", strtotime($course->stime))?>
</td>
<td align="center">
<?= date("h:i", strtotime($course->etime))?>
</td>
<td align="center">
<?= $course->instructor ?>
</td>
</tr>
<? endforeach; ?></tbody>
</table>
日期格式如何顯示，如下所示：10/01/1 5？ – Tarek
是的。對不起忙於其他事情。 – Inky1231