Search code examples
javascriptjquerytablesorter

tablesorter() jQuery function for dd-MMM-yyyy format


Here is my HTML code.

This code is not working for date format instead it is sorting as string format.

I also referred few article like one in jquery tablesorter sort date dd mmm yyyy .

But for this format it is not working.

I am using Regular expression like

^(([0-9])|([0-2][0-9])|([3][0-1]))\-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\-\d{4}$

Still not working. Please help me

<html>
<head><title>

</title><link href="themes/blue/style.css" rel="stylesheet" /><link     href="themes/green/style.css" rel="stylesheet" />
<script src="jQuery/jquery-1.9.0.min.js" type="text/javascript"></script>

<script src="jQuery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="jQuery/TableSorter.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#GrdViewEmployee").tablesorter({ 
             sortList: [[0, 0], [2, 1]], 
             widgets:'zebra'
        });
    });
</script>
</head>
<body class="tablesorterBlue">
<form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="fauQ7GKDqTon5mt7NHJnOCzVzfTVHWHj+gG3j+CA8mTf4JJVPho0PBzFatn/hz/0xu7X0+jfUVQHlCgPQh5CNnoHCyzZOnTqgr7nSstUfCj5JlrZkhV7468h3Vx1e7Er" />
</div>

    <div>
<table cellspacing="0" rules="all" class="tablesorterBlue" border="1" id="GrdViewEmployee" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th scope="col">empId</th><th scope="col">empName</th><th scope="col">empEMail</th><th scope="col">empPhone</th>
        </tr>
    </thead><tbody>
        <tr>
            <td>1</td><td>rameshwar</td><td>[email protected]</td><td>2-Aug-2013</td>
        </tr><tr>
            <td>2</td><td>shrivatsav</td><td>[email protected]</td><td>27-Aug-2013</td>
        </tr><tr>
            <td>3</td><td>ganga</td><td>[email protected]</td><td>14-Jan-2013</td>
        </tr><tr>
            <td>4</td><td>krishna</td><td>[email protected]</td><td>13-Jan-2014</td>
        </tr><tr>
            <td>5</td><td>mahesh</td><td>hfgsdhjf@jdfsgjd</td><td>30-Nov-2013</td>
        </tr><tr>
            <td>6</td><td>Shridhar</td><td>[email protected]</td><td>1-Dec-2013</td>
        </tr>
    </tbody><tfoot>

    </tfoot>
</table>
</div>
</form>
</body>
</html>

Solution

  • You can add your own parser:

    monthDict = {
        'Jan': '01','Feb': '02','Mar': '03',
        'Apr': '04','May': '05','Jun': '06',
        'Jul': '07','Aug': '08','Sep': '09',
        'Oct': '10','Nov': '11','Dec': '12'
    }
    $.tablesorter.addParser({ 
        id: 'mydate', 
        is: function(s) {return false}, 
        format: function(s) { 
            var date = s.split('-');
            var date[0] = (date[0].length == 1) ? '0' + date[0] : date[0];
            return date[2] + monthDict[date[1]] + date[0];
        }, 
        type: 'numeric' 
    }); 
    $("#GrdViewEmployee").tablesorter({
        sortList: [[0, 0], [2, 1]], 
        widgets: 'zebra',
        headers: {3: {sorter:'mydate'}} 
    }); 
    

    See working jsfiddle.