We help IT Professionals succeed at work.

jQuery Tablesorter - First Date column of multiple dates not sorting

I am having trouble getting the first date column (START) to sort, there are a total of 4 date columns.  All other columns, including the other date columns sort without any issues.

When I click the first date column (START), the up\down icons work, but no data is sorted.  I am not seeing any error messages.

1.) All the dates are in the mm/dd/yyyy format
2.) I know it is not an issue with the data since I can move the first date column (START) to display after the STATUS column and it will sort fine, however the first of the other 3 date column no longer sorts.
3.) This issue exists in all browers that I have tried (IE, FF, CHROME).


Here is my code:

 
<!--- START JQUERY TABLESORT --->
		<link rel="stylesheet" href="media/jq.css" type="text/css" media="print, projection, screen" />
		<link rel="stylesheet" href="media/blue/style.css" type="text/css" media="print, projection, screen" />

		<script type="text/javascript" src="media/jquery-latest.js"></script>
		<script type="text/javascript" src="media/jquery.tablesorter.js"></script>
		<script type="text/javascript" src="media/jquery.metadata.js"></script>
		<script type="text/javascript" src="media/jquery.tablesorter.pager.js"></script>

		<script type="text/javascript" id="js">
		// add parser through the tablesorter addParser method
		$.tablesorter.addParser({
			// set a unique id
			id: 'grades',
			is: function(s) {
				// return false so this parser is not auto detected
				return false;
			},
			format: function(s) {
				// format your data for normalization
				return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
			},
			// set type, either numeric or text
			type: 'numeric'
		});

		$(function() {
			$("table").tablesorter({
				headers: {
					6: {
						sorter:'grades'
					}
				}
			});
		});
		</script>
<!--- END JQUERY TABLESORT --->


<div id="demo">
	<table cellspacing="1" class="tablesorter">
		<thead>
			<tr>
				<th width="100">JOB NUMBER</th>
				<th width="250">ITEM NUMBER</th>
				<th width="150">STATUS</th>
				<th width="100">QTY</th>
				<th width="50">OP#</th>
				<th width="200">OPERATION</th>
				<th width="200">SCHEDULED START</th>
				<th width="200">SCHEDULED COMPLETION</th>
				<th width="200">PROMISE DATE</th>
				<th width="200">COMPLETED ON</th>
				<th width="200">ESTIMATE</th>
				<th width="200">WIP ACTUALS</th>
			</tr>
		</thead>

		<tbody>

			<cfloop query="getstuff">
				<tr>
					<td>
						<cfoutput>
							#getstuff.name#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#getstuff.s1#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#ucase(getstuff.status)#
						</cfoutput>
					</td>

					<td align="center">
						<cfoutput>
							#getstuff.ty#
						</cfoutput>
					</td>



					<td align="center">
						<cfoutput>
							#getstuff.num#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#getstuff.code#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#dateformat(getstuff.start, "mm/dd/yyyy")#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#dateformat(getstuff.completion, "mm/dd/yyyy")#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#dateformat(getstuff.promise, "mm/dd/yyyy")#
						</cfoutput>
					</td>

					<td>
						<cfoutput>
							#dateformat(getstuff.completed, "mm/dd/yyyy")#
						</cfoutput>
					</td>

					<td align="right">
						<cfoutput>
							#numberformat(getstuff.est, 0.00)#
						</cfoutput>
					</td>

					<td align="right">
						<cfoutput>
							#numberformat(getstuff.act, 0.00)#
						</cfoutput>
					</td>

				</tr>
			</cfloop>

		</tbody>
	</table>
</div>

Open in new window


does anybody have any ideas where to look?

Comment
Watch Question

Can you post the html that is output?
IT Expert
Top Expert 2009
Commented:
why do you add a custom sorter called grades to the start column?

Just remove the parser and the

$(function() {
                  $("table").tablesorter({
                        headers: {
                              6: {
                                    sorter:'grades'
                              }
                        }
                  });
            });
Michel PlungjanIT Expert
Top Expert 2009
Commented:
$(document).ready(function() {
    $("table").tablesorter();
});

is enough

Author

Commented:
Excellent, works like a charm now... Thank you!