使用sorttable.js排序日期，按年，然后按月排序

Question

我正在使用sorttable.js对从我们的Mysql数据库中提取的表进行排序。数据库包含我们提供的课程的开始和结束日期。排序工作很好，除了我刚刚注意到按日期排序时，即使年份较早（即2015年与2016年），它总是将10-12个月放在最后，以便例如10/01/15显示在底部之后16年1月1日。我知道它必须是一些简单的调整，但我一直无法弄清楚在哪里或如何。我不是很精通javascript，可以使用一点帮助。有人可以告诉我我做错了什么吗？

/**
*
*  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>

Answer 1

也许您只需更改sortDate函数并使用Date（）对象，如下所示：

date1 = new Date(aa);
date2 = new Date(bb);

一个有效的JSFiddle： enter link description here