Question

我正在尝试使用纯jquery和javascript构建一个简单的HTML表格排序器，而不使用任何插件，但无法使日期列正常运行。 2015年6月16日和2016年1月1日是不对的，它几乎就像我不是每排排序。其他专栏正确出来，但我无法弄清楚最新情况。

这就是我所拥有的：

使用Javascript：

<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
    ('#HardSoftWareTbl thead').on('click', 'th', function () {
        $(this).attr('data-order', ($(this).attr('data-order') === 'desc' ? 'asc' : 'desc'));
        if ($(this).hasClass("dateTh")) {
            sorttable(this, $('#HardSoftWareTbl thead th').index(this), true);
        }
        sorttable(this, $('#HardSoftWareTbl thead th').index(this), false);
    });
});
function sorttable(header, index, isDate) {
    var tbody = $('table tbody');
    var order = $(header).attr('data-order');
    tbody.find('tr').sort(function (a, b) {
        var tda = $(a).find('td:eq(' + index + ')').text();
        var tdb = $(b).find('td:eq(' + index + ')').text();
        if (isDate) {
            tda = toDate(tda);
            tdb = toDate(tdb);
        }
        return (order === 'asc' ? (tda > tdb ? 1 : tda < tdb ? -1 : 0) : (tda < tdb ? 1 : tda > tdb ? -1 : 0));
    }).appendTo(tbody);
}
function toDate(d) {
    console.log("d: " + d);
    var date = d.split(" ")[0].split("/");
    console.log("date: " + date);
    return new Date(date[2], date[0] -1, date[1]);
}     
</script>

HTML：

<style>
table {width: 100%;font: 12px arial;}
th, td {min-width: 40px;text-align: center;}
th {font-weight: bold;}
 </style>
  <table id="HardSoftWareTbl" class="table">
<thead id="theader"  >
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Cost</th>
        <th>Quantity</th>
        <th class="dateTh">Date Added</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Surface Book</td>
        <td>A portable tablet/laptop hybrid</td>
        <td>$1,899.99</td>
        <td>24</td>
        <td>6/16/2015</td>
    </tr>
    <tr>
        <td>Surface Studio</td>
        <td>A desktop computer.   Edit photos, videos, etc.</td>
        <td>$2,999.99</td>
        <td>87</td>
        <td>1/1/2016</td>
    </tr>
    <tr>
        <td>Visual Studio</td>
        <td>The best IDE around for software development using Microsoft technology</td>
        <td>$10,999.99</td>
        <td>N/A</td>
        <td>5/2/1999</td>
    </tr>
    <tr>
        <td>Visual Studio</td>
        <td>IDE for software development using Microsoft         technology</td>
        <td>$10,999.99</td>
        <td>01</td>
        <td>5/3/2000</td>
    </tr>
</tbody>

初始表状态：

首先点击添加日期

最后点击添加日期

Answer 1

代码中的问题是，sorttable被调用两次。将isDate设置为true后立即设置为falsey值。

添加了以下块：

if ($(this).hasClass("dateTh")) {
    sorttable(this, $('#HardSoftWareTbl thead th').index(this), true);
}
sorttable(this, $('#HardSoftWareTbl thead th').index(this), false);

到

if ($(this).hasClass("dateTh")) {
    sorttable(this, $('#HardSoftWareTbl thead th').index(this), true);
} else {
    sorttable(this, $('#HardSoftWareTbl thead th').index(this), false);
}

否则它将排序两次。

在以下位置查看笔：

https://codepen.io/ankur-agarwal/pen/QQKJJj

我确实更新了toDate，假设格式为MM-dd-yyyy。

Answer 2

您可以编写自定义日期比较器，如下所示。

function dateComparator(date1, date2) {
    var date1Number = getComparableNumber(date1);
    var date2Number = getComparableNumber(date2);
    //Negative if date2 is bigger and possitive if date2 is smaller.
    return date1Number - date2Number;
}


function getComparableNumber(date) {
    if (date === undefined || date === null) {
        return null;
    }
    var dtSplit = date.split('/');
    var yearNumber = dtSplit[2];
    var dayNumber = dtSplit[1];
    var monthNumber  = dtSplit[0];
    return (yearNumber*10000) + (monthNumber*100) + dayNumber;

}

此处日期转换为类似＆＃34; 1/1 2016年＆＃34;将被转换为201601001.现在您可以轻松订购。

如果您对开源库开放，可以查看Moment.js。它是一个出色的日期处理库。

如何使用javascript获取日期列以进行排序？

2 个答案: