Hello, I've been scouring the internet trying to find a way to do this with jQuery. My situation is this, I have a tablesorter function (using the jQuery plugin tablesorter) in an external scripts.js file as follows:
$(function() {
$(aTable).tablesorter({
// Go through each column and sort data according to type of data in the column
});
});
In my html file I have it declared in my head as follows
<script type="text/javascript" src="starterkit/jquery-1.3.2.js"></script>
<script type="text/javascript" src="starterkit/jquery.tablesorter.js"></script>
<script type="text/javascript" src="starterkit/scripts.js"></script>
<script type="text/javascript">
var aTable = $("#myTable");
var columns = $("#myTable tbody th:").length;
</script>
What I want to do is pass the aTable and columns variables to the external function and use a for loop to cycle through each column to determine a) should the column be sorted or not and b) if it is to be sorted, what kind of data is in the column? Add a special parser depending on this data, i.e. if the column contains a date, add a date parser, etc. I'm completely stuck, any hints are appreciated.
UPDATE
@ Chad Bird, here is the complete code as I originally had it for one table instance, I've also included the sample table I'm working with:
$(function() {
$(aTable).tablesorter({
// pass the headers argument and passing a object
headers: {
// place usLongDate parser in date column for proper sorting
2 : { sorter: "usLongDate" },
// assign the fourth column (we start counting zero)
3: {
// disable it by setting the property sorter to false
sorter: false
},
// assign the eighth column (we start counting zero)
7: {
// disable it by setting the property sorter to false
sorter: false
}
}
});
});
Sample Table
<table id="myTable" summary="Table is used to list available workshops" cellspacing="0">
<thead>
<tr>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="sort-down">Title</a></th>
<th><a rel = "Header" href="#" title="Sort column in ascending order" class="sort-down">Instructor</a></th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="sort-up">Date</a></th>
<th id="1">Start/End</th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="sort-up">Seats Available</a></th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="sort-up">Enrolled</a></th>
<th><a rel = "Header" href="#" title="Sort column in decending order" class="sort-up">Pre-Requisites</a></th>
<th id="1">Workshop Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic Economics for CEOs</td>
<td>George Washington</td>
<td>March 2, 2009</td>
<td>9:00am - 11:00am</td>
<td>0 / 20</td>
<td></td>
<td></td>
<td>Details</td>
</tr>
<tr>
<td>Intro. to Psychology</td>
<td>Jimi hendrix</td>
<td>March 6, 2009</td>
<td>10:00am 12:00pm</td>
<td>11 / 15</td>
<td>Enrolled</td>
<td></td>
<td>Details</td>
</tr>
<tr>
<td>Improving the Workplace</td>
<td>Dr. Manhattan</td>
<td>March 20, 2009</td>
<td>3:00pm - 4:30pm</td>
<td>12 / 18</td>
<td>Enrolled</td>
<td></td>
<td>Details</td>
</tr>
<tr>
<td>Music appreciation</td>
<td>Tupac Shakur</td>
<td>March 21, 2009</td>
<td>10:30am - 12:30pm</td>
<td>20 / 25</td>
<td></td>
<td></td>
<td>Details</td>
</tr>
</tbody>
</table>
Basically, I'm trying to make it so anyone who implements this only needs to worry about giving a consistent name to all tables, i.e. all tables are named "myTable". And the function takes care of counting the number of columns, determining (by searching for id="1" in the table header) whether to set the column to sorter: false, or, if it does need to be sorted, determine the type of data that is in the column, i.e. if the column contains dates, then add the usLongDate parser, etc.