How to sort table by date string in javascript/ jquery…?

Question

I am trying to sort table by date it works in Chrome but does not work in IE and Mozilla browsers?

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

You need to use the debugger in Firefox and inspect your sort comparator function. Check that your date values are not NaN . (use isNaN ).

I've simplified and fixed your code.

• De-duplicate lines code by setting variables instead of using if/else.
• sort function returns either 1 or -1 explicitly. (Just because JS lets you be dirty, doesn't mean you should be dirty)
• Always check for NaN values and set to something explicit, such as Infinity .

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

Answer 2

The problem is that Date returns NaN when the text is empty (Chrome seems to be more flexible), which causes the sort to fail. You could alter your current sort into something like:

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

The || 0 makes sure a number is returned. Best is to have a helper function so you don't have repeated code and don't have to alter each occurrence.

Example Fiddle