Adding a sorter parser based on data sample from a cell column

Question

This is the last part of this project, thanks to all who've helped with syntax correction on other parts. I'm using the tablesorter plugin for jQuery. Basically, what I want to accomplish is for my custom sort function to pick a table header based on whether or not it has a class, namely "SortableHeader". It then has to decide what metadata parser to add to the header of that particular column based on the data in that column. I've taken the more complex approach and decided to take a sample of the data from a single cell( say the first row of the column) and compare it to different patterns, or regular expressions, the sorter will then add the proper metadata parser based on the comparison result, e.g. if it matches the date pattern, the sorter will add the date parser, if it matches the URL pattern, it adds the URL parser, etc. I have two issues:

1. I can't figure out how to select a single row from a column, I've tried looking, but I only find tutorials for traversing all rows in a table, as opposed to selecting a single row from a column based on the column header information.

2. I'm not sure how to do patterns and/or regular expressions in jQuery. e.g. How would a date regular expression/pattern that looks for dates of the form March 2, 2009, look in jQuery??

I currently have following outline

    //Add parser to each table header that has a class="SortableHeader"
    $("th[class='SortableHeader']").each(function(column){
     //Take a sample of data from a single cell in this column 
        // compare it to various patterns to determine what type 
       //of data it contains in order to apply the appropriate parser   
    });

A sample header section to perform the sort searching on would be:

<table id="myTable" summary="Table is used to list available workshops"  cellspacing="0">
      <thead>
       <tr>
        <th class="SortableHeader"><a rel = "Header" href="#" title="Sort title in decending order" class="">Title</a></th>
        <th><a rel = "Header" href="#" title="Sort instructor in descending order" class="">Instructor</a></th>
        <th class="SortableHeader"><a rel = "Header" href="#" title="Sort column in decending order" class="">Date</a></th>
        <th>Start/End</th>
        <th><a rel = "Header" href="#" title="Sort column in decending order" class="">Seats Available</a></th>
        <th><a rel = "Header" href="#" title="Sort column in decending order" class="">Enrolled</a></th>
        <th><a rel = "Header" href="#" title="Sort column in decending order" class="">Pre-Requisites</a></th>
        <th>Workshop Actions</th>
       </tr>
      </thead>

The last question I have is, might there be a much simpler way of doing this?? I figure I could just take the title from the header and base the parser selector on that, but I wanted to avoid this since it seems to be a bit less flexible, I'd have to hard code specific strings to check the title of the header against and anyone who is implementing this would only be able to use those specific strings as the title of there header in order to apply specific sort parsers. I want ot avoid this if I can.

Answer 1

You may want to check this plugin out.

It's easy and it looks good!

Answer 2

1. Use a selector that returns the columns in the first row, and then select the column you want from that.

   var firstColumn = $("#myTable TBODY TR:first TD")[0];

2. I would try to coerce the value for date and numeric types, and then you can get into subtypes and regular expression matching when you're looking at various string type variations (URLs, etc...)

3. If you'd like to make it more decarative, I would just add another class to the column headers that indicate the comparer you want to use in the sort.

   < th class="SortableHeader DataTypeDate">...< /th> < th class="SortableHeader DataTypeURL">...< /th>

When you initialize the sorts you can use the hasClass method to see if a column has a particular date type associated with it.

$("#myTable THEAD TR:first TH").each(function(column) {
    if ($(this).hasClass("DataTypeDate")) {
        // ...
    }
});