Add a sorter parser based on sample data from a cell column
This is the last part of this project, thanks to everyone who helped with the syntax correction in other parts. I am using the tablesorter plugin for jQuery. Basically, I want my custom sort function to select the table header based on whether the class has a class, namely "SortableHeader". It then has to decide which metadata parser to add to the header of that particular column based on the data in that column. I took a more complex approach and decided to take a sample of data from one cell (say the first row of a column) and compare it against different patterns or regex, the sorter will then add the correct metadata parser based on the comparison result, for example if it matches the date pattern, the sorter will add a date parser, if it matches a URL pattern, it will add a url parser, etc.I have two problems:
-
I can't figure out how to select one row from a column, I tried looking, but I only find tutorials to move all rows to a table, as opposed to selecting one row from a column based on the column header information.
-
I'm not sure how to do templates and / or regex in JQuery. eg How would a date regex / pattern that looks for dates of the form March 2, 2009 look in jQuery ??
I currently have the following plan
//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 for performing a sort lookup would look like this:
<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, could it be much simpler? I suppose I could just take the title from the title and base the parser selector on that, but I wanted to avoid that as it seems a little less flexible, I will have to hard-code certain lines to check the title of the title, and anyone who implements it will be able to use those specific lines as the header header to apply custom sorting parsers. I want to avoid this if I can.
a source to share
-
Use a selector that returns the columns in the first row and then select the column you want.
var firstColumn = $ ("# myTable TBODY TR: first TD") [0];
-
I would try to amplify the value for both numeric and numeric types, and then you can get subtypes and regex matching when you look at the various string type options (urls, etc.)
-
If you want to make it a bit more deactivating, I would just add another class to the column headers that indicate the collation you want to use in the sort.
<th class = "SortableHeader DataTypeDate"> ... </E> <th class = "SortableHeader DataTypeURL"> ... </th>
When you initialize sorts, you can use the hasClass method to see if a column is associated with a specific date type.
$("#myTable THEAD TR:first TH").each(function(column) {
if ($(this).hasClass("DataTypeDate")) {
// ...
}
});
a source to share