如何在javascript / jquery中按日期字符串对表格进行排序？

Question

我正在尝试按日期对表格进行排序，使其在Chrome中可用，但在IE和Mozilla浏览器中不起作用？

JSFIDDLE

<article>
    <div style="margin-bottom: 10px;">
        <label for="dept" class="lbl-title">Select Department :</label> <select
            name="dept" id="dept" class="select_dept">
            <option value="">All</option>
            <option value="DEPT-1">Information Technology Department</option>
            <option value="DEPT-2">Networking Department</option>
            <option value="DEPT-3">Testing Department</option>
            <option value="DEPT-4">Account Department</option>
            <option value="DEPT-5">Sales Department</option>
            <option value="DEPT-6">Marketing Department</option>
        </select>
    </div>
    <table class="table" id="tbl-dept" border="1">
        <thead>
            <tr>
                <th class="layout-1">Department Name</th>
                <th>Description</th>
                <th class="layout-1" id="sort"
                    style="cursor: pointer; background: red;">Date
                    &nbsp;&nbsp;<span class="arrow">&#8645;</span></a><input type="hidden"
                    id="sort-direction" value="SORT_ASC" />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="DEPT-1">
                <td>Information Technology Department</td>
                <td>Sample description</td>
                <td>06 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr class="DEPT-2">
                <td>Networking Department</td>
                <td>Sample description</td>
                <td>02 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr class="DEPT-3">
                <td>Testing Department</td>
                <td>Sample description</td>
                <td>05 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>

            <tr class="DEPT-4">
                <td>Account Department</td>
                <td>Sample Description</td>
                <td>01 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>

            <tr class="DEPT-5">
                <td>Sales Department</td>
                <td>Sample Description</td>
                <td>03 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>

            <tr class="DEPT-5">
                <td>Marketing Department</td>
                <td>Sample Description</td>
                <td>04 May, 2015</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><a href="#">Link</a></td>
                <td>&nbsp;</td>
            </tr>

        </tbody>
    </table>
</article>

$(document).ready(function(){
    $("#sort").on("click",function (e) {
        e.preventDefault();
        if ($("#sort-direction").val() === "SORT_ASC") {
            $('#tbl-dept tbody tr').sort(function (a, b) {                          
                return new Date($(a).find('td:eq(2)').text()).getTime() - new Date($(b).find('td:eq(2)').text()).getTime();
            }).appendTo('#tbl-dept tbody');
            $("#sort-direction").val("SORT_DESC");
        } else {
            $('#tbl-dept tbody tr').sort(function (a, b) {
                return new Date($(b).find('td:eq(2)').text()).getTime() - new Date($(a).find('td:eq(2)').text()).getTime();
            }).appendTo('#tbl-dept tbody');
            $("#sort-direction").val("SORT_ASC");
        }
    });

    $("#dept").on("change", function () {
        var cls = $(this).val();
        if (cls === "") {
            $("#tbl-dept tbody tr").show();
        } else {
            $("#tbl-dept tbody tr").hide();
            $("#tbl-dept tbody tr." + cls).show();
        }
    });
});

Answer 1

您需要在Firefox中使用调试器并检查排序比较器功能。 检查您的日期值不是NaN 。 （使用isNaN ）。

我已经简化并修复了您的代码。

• 通过设置变量而不是使用if / else来重复行代码。
• sort函数显式返回1或-1。 （因为JS让您很脏，并不意味着您应该很脏）
• 始终检查NaN值并将其设置为明确的值，例如Infinity 。

http://jsfiddle.net/tcqv58ke/2/

Answer 2

问题在于，当文本为空（Chrome似乎更灵活）时，Date返回NaN，这将导致排序失败。 您可以将当前的排序方式更改为：

new Date($(tr).find('td:eq(2)').text()).getTime() || 0

|| 0确保返回一个数字。 最好是具有一个辅助函数，这样您就不必重复代码，也不必更改每次出现的情况。

小提琴的例子