Why doesn't this function replace the class
I have a function that I am testing, it needs to check all the table headers to see if it has a specific class, remove it and replace it with another class. I am using this to toggle the metadata parsers for the tablesorter plugin. The code I have is below:
$(function(){
$("th").each(function(){
if ($(this).hasClass("{sorter: 'usLongDate'}")) {
$(this).removeClass("{sorter: 'usLongDate'}").addClass("{sorter: 'false'}");
}
});
});
$(function() {
$("table").tablesorter({});
});
I am trying to switch the class parser in the following header to a fake inline parser.
<th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" title="Sort column in decending order" class="">Date</a></th>
Of course this is not my only header, I am just testing it on this, I assume the rest of the headers should not be affected, tablesorter should sort them anyway. But when I run the html file, nothing works. Is there something I am missing? Thanks.
NOTE. To avoid confusion, the tablesorter plugin for jQuery can use built-in parsers on the table header class attribute to determine how and / or the column should be sorted.
UPDATE: Tried Vincent Robert's suggestion, unfortunately it doesn't work. As for whether addClass and removeClass can handle them. I have an original function that was able to add a disabled parser to all classes,
$("th[class='']").addClass("{sorter: 'false'}");
it comes from Paolo Bergantino and he did a great job. I'm just trying to expand it a bit.
a source to share
This is probably what you are looking for.
$(document).ready(function() {
$("th[class*='usLongDate']").each(function(){
$(this).removeClass("{sorter: 'usLongDate'}").addClass("{sorter: false}");
});
$("table").tablesorter();
});
The problem is probably because the classes are separated by spaces. Technically "{sorter:" and "usLongDate"} are two different classes. I don't know exactly how the TableSorter handles them, but removing "{sorter:" and then adding it back should have it next to "false").
a source to share
Correct me if I am wrong. But class = "{sorter: 'usLongDate'}" is not a valid class name. Classes are names separated by spaces. class = "class1 class2" means that the element has two classes class1 and class2, and not one class. Valid class names are explained here .
EDIT
If you want to be able to change the class, use attr instead of add / remove class anyway
$(this).attr('class', 'myNewClass');
and remove the use:
$(this).removeAttr('class');
a source to share
I don't think addClass () or removeClass () can handle these types of "classes". Instead, you must access the "class" attribute directly.
Now I am not familiar with this plugin ...
$(function(){
$("th").each(function(){
if ($(this).attr("class") == "{sorter: 'usLongDate'}") {
$(this).attr("class", "{sorter: 'false'}");
}
});
});
EDIT
Just look at the documentation and you can use an option instead of a class:
$('table').tablesorter({
headers: $('th').map(function(i)
{
return { sorter: false /* or whatever you want based on $(this) content */ };
})
});
This should work as long as you call it before calling tablesorter ().
a source to share