tags:

views:

426

answers:

2

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.

A: 

If you include your external function after your inlined JavaScript with aTable etc., you should be all set.

Deniz Dogan
Hello skurpur, I tried switching the the external function with the inline javascript variables, but that didn't do anything
kingrichard2005
+1  A: 

Maybe I'm misunderstanding what you're trying to do, but I think that tablesorter already has the functionality you're trying to create. You can define each column's sorting parser when you initialize the tablesorter, or disable some columns from being usable as sorting methods. I can add some code examples if you'd like, but can you clarify first whether that's actually what you're trying to do?

If you are just trying to initialize the tablesorter, it's as skurpur said, you're just doing things in the wrong order. You also seem to be missing a couple </script> tags, but maybe you just removed those from the code when you added it here.

Chad Birch
Greetings, I've added more details to make my problem and goal more clear. Some examples would be appreciated. I'm very much a beginner to jQuery, so any assistance will help. Thanks.
kingrichard2005
Besides passing the arguments properly to the function, I'm trying to figure out how to properly implement a for loop within the function to cycle through each column. Again, I'm not terribly familiar with the jQuery syntax so this has proven a challenge.
kingrichard2005