CODEWITHSUNDEEP
jquery
kingrichard2005
kingrichard2005

Reputation: 7269

Adding a class to all table headers

I'm using a jQuery and the tablesorter plugin in my web page. My goal is to add the tablesorter header disable parser to each header whose class is empty using its metadata inline insertion functionality. I have three functions outlined, the first is the class that adds the disable parser to each header with a blank class(""), the second will perform class switching operations on headers that don't have blank classes to begin with and the third will call the actual tablesorter, once all headers are set.

$(function(){
    //Code is supposed to add the disable parser to each header with a blank class
    $("th").each(function(){
        if ($(this).hasClass('')){$(this).addClass('{sorter: 'false'}');
    });
});


$(function() {
    //Code manipulates headers with non-blank classes
}); 

$(function() {
    //Call tablesorter on all tables once their headers are set.
    $("table").tablesorter({}); 
});

So far the second and third functions work as expected, although I eventually plan on extending the second function even further, once I can get the issues with the first function sorted out. This leads me to my problem and that is that the first function to add the parser doesn't seem to add the class at all and furthermore, since it's not working properly, it seems to prevent the second and third from working. These functions will work if I take away the first function; I'm not sure if I have the syntax wrong or if I can even add the parser dynamically in this manner. Below is a sample of headers from the HTML:

<th class=""><a rel = "Header" href="#" title="Sort title in decending order" class="">Title</a></th>
<th class=""><a rel = "Header" href="#" title="Sort instructor in descending order" class="">Instructor</a></th>
<th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" title="Sort column in decending order" class="">Date</a></th>
<th class="">Start/End</th>
<th class=""><a rel = "Header" href="#" title="Sort column in decending order" class="">Seats Available</a></th>
<th class=""><a rel = "Header" href="#" title="Sort column in decending order" class="">Enrolled</a></th>
<th class=""><a rel = "Header" href="#" title="Sort column in decending order" class="">Pre-Requisites</a></th>
<th class="">Workshop Actions</th>

Upvotes: 1

Views: 2137

Answers (1)

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

Your problem is with this line:

if ($(this).hasClass('')){$(this).addClass('{sorter: 'false'}'); }

Your quotes inside the {sorter:'false'} are closing out the outer quotes. Try this:

if ($(this).hasClass('')){$(this).addClass("{sorter: 'false'}"); }

Aside from that, adding a class with that value looks very odd to me but if you're sure that's how tablesorter knows not to sort a column then that should work. You could also shorten the selector:

$("th[class='']").addClass("{sorter: 'false'}");

Upvotes: 4

Related Questions