javascript - jQuery plugin Tablesorter sorts dates incorrectly - Stack Overflow

admin管理员组

文章数量:1391991

I'm trying to use the jQuery plugin Tablesorter to sort date fields. Now the strange thing is that the sorting seems to partially work, it does rearrange the order the results are displayed, which shows that at the very least, the script is initialised.

Now I don't understand why this would be the case, my HTML looks like this:

<link href="/themes/blue/Style.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{ 
    $("#repairtable").tablesorter(
{ 
    sortList: [[1, 0]], 
    dateFormat : "ddmmyyyy",
    headers: { 1:{ sorter: "shortDate", dateFormat: "ddmmyyyy"} }
});
} 
);
</script>
<table id="repairtable" class="tablesorter">
<thead>
<tr>
<th>ID</th>
    <th>Date In</th>
    <th>Customer</th>
</tr>
</thead>
<tbody>
<tr>
   <td>48</td>
   <td>11/03/2013</td>
   <td>Rainhem Launderette</td>
</tr>
<tr>
   <td>13</td>
   <td>10/01/2013</td>
   <td>IESA (Gunstones)</td>
</tr>
<tr>
   <td>14</td>
   <td>10/01/2013</td>
   <td>GVF</td>
</tr>
<tr>
   <td>41</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>
<tr>
   <td>42</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>
<tr>
   <td>43</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>   
<tr>
   <td>40</td>
   <td>07/03/2013</td>
   <td>RAG Collections Ltd</td>
</tr>
<tr>
   <td>38</td>
   <td>06/03/2013</td>
   <td>WM Sinclair</td>
</tr>
<tr>
   <td>39</td>
   <td>06/03/2013</td>
   <td>WM Sinclair</td>
</tr>
<tr>
   <td>22</td>
   <td>05/03/2013</td>
   <td>IESA Weetabix B'Lat</td>
</tr>
</tbody>
</table>

Clicking on the appropriate column headers does sort the order of the data stored in the cells, but it orders dates incorrectly. I am attempting to order them by day / month / year but it doesn't seem to do so. There is actually more data in the table than I have shown here, one date field is 25/02/2013 which should be higher than 10/01/2013 which is the second row in the screenshot I provided.

I am relatively new to web development and any pointers would be greatly appreciated.

I'm trying to use the jQuery plugin Tablesorter to sort date fields. Now the strange thing is that the sorting seems to partially work, it does rearrange the order the results are displayed, which shows that at the very least, the script is initialised.

Now I don't understand why this would be the case, my HTML looks like this:

<link href="/themes/blue/Style.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{ 
    $("#repairtable").tablesorter(
{ 
    sortList: [[1, 0]], 
    dateFormat : "ddmmyyyy",
    headers: { 1:{ sorter: "shortDate", dateFormat: "ddmmyyyy"} }
});
} 
);
</script>
<table id="repairtable" class="tablesorter">
<thead>
<tr>
<th>ID</th>
    <th>Date In</th>
    <th>Customer</th>
</tr>
</thead>
<tbody>
<tr>
   <td>48</td>
   <td>11/03/2013</td>
   <td>Rainhem Launderette</td>
</tr>
<tr>
   <td>13</td>
   <td>10/01/2013</td>
   <td>IESA (Gunstones)</td>
</tr>
<tr>
   <td>14</td>
   <td>10/01/2013</td>
   <td>GVF</td>
</tr>
<tr>
   <td>41</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>
<tr>
   <td>42</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>
<tr>
   <td>43</td>
   <td>08/03/2013</td>
   <td>Triumph</td>
</tr>   
<tr>
   <td>40</td>
   <td>07/03/2013</td>
   <td>RAG Collections Ltd</td>
</tr>
<tr>
   <td>38</td>
   <td>06/03/2013</td>
   <td>WM Sinclair</td>
</tr>
<tr>
   <td>39</td>
   <td>06/03/2013</td>
   <td>WM Sinclair</td>
</tr>
<tr>
   <td>22</td>
   <td>05/03/2013</td>
   <td>IESA Weetabix B'Lat</td>
</tr>
</tbody>
</table>

Clicking on the appropriate column headers does sort the order of the data stored in the cells, but it orders dates incorrectly. I am attempting to order them by day / month / year but it doesn't seem to do so. There is actually more data in the table than I have shown here, one date field is 25/02/2013 which should be higher than 10/01/2013 which is the second row in the screenshot I provided.

I am relatively new to web development and any pointers would be greatly appreciated.

• javascript
• jquery
• html
• jquery-plugins
• tablesorter

Share Improve this question Follow asked Mar 15, 2013 at 13:54 Daniel LaneDaniel Lane 2,59322 gold badges1919 silver badges3434 bronze badges 2

• Actually it looks like your code does sort the column correctly (demo), at least in the latest version of the script (v2.7.12). – Mottie Commented Mar 15, 2013 at 15:17
• Hm, quite odd behaviour I saw with it. Ckersch's suggestion did the trick to format it by day-month-year correctly though (dateFormat="uk"). I imagine it works with the latest version because the code I wrote was based on the later versions documentation I was reading as I wrote it. It turns out I used an older version for some inexplicably stupid reason on my part! Anyway it's good to know it worked as I originally intended it to on the version I was reading the documentation for. – Daniel Lane Commented Mar 15, 2013 at 15:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The US has an odd date convention, in which dates tend to be written month/day/year, so it's sorting them like that.

Edit: There already exists that functionality in tablesorter. Use:

$("#tableName").tablesorter({dateFormat: "uk"});

From this other question about tablesorter.

What I did was: in the plugin, around line 970, in the ts.addParser function, I changed the following code to the else if dateformats:

        if (c.dateFormat == "us") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
        } else if (c.dateFormat == "uk") {
            // reformat the string in ISO format
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
        } else if (c.dateFormat == "dd/mm/yy" || c.dateFormat == "dd-mm-yy") {
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
            // I added the lines below for the format with full year format,
            // Note that I inverted the day and month in the final format so
            // when the string is converted to date, it converts it right
        } else if (c.dateFormat == "dd/mm/yyyy" || c.dateFormat == "dd-mm-yyyy"){
            s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$2/$1/$3");
        }

本文标签： javascriptjQuery plugin Tablesorter sorts dates incorrectlyStack Overflow