如何在javascript / jquery中按日期字符串排序...?

时间:2015-12-03 07:47:07

标签: javascript jquery

我正在尝试按日期对表格进行排序,但它在Chrome和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();
        }
    });
});

2 个答案:

答案 0 :(得分:3)

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

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

  • 通过设置变量而不是使用if / else。
  • 来重复删除行代码
  • sort函数显式返回1或-1。 (只是因为JS让你变脏,并不意味着你应该变脏)
  • 始终检查NaN值并设置为明确的内容,例如Infinity

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

答案 1 :(得分:1)

问题是Date在文本为空时返回NaN(Chrome似乎更灵活),这会导致排序失败。您可以将当前的排序更改为:

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

|| 0确保返回一个数字。最好是拥有辅助功能,这样你就不会重复编码,也不必改变每次出现的事情。

示例Fiddle