Have Geek Brain

Table header processing

I am using this in conjunction with the tablesorter plugin, my goal is to have an empty class attribute on any column that is not sorted, i.e. when I click on one column the class attributes in the others are removed.

I have a table with all the title link, basically what I want to do is when I click on the table title, I want all the other tables to remove the css class, but the one clicked should be to switch between the two css classes. I am using the rel tag in the anchor tag in the header content, I am doing this because we are using XHTML Strict and rel cannot be defined in the table header tag itself. My code looks like this:

$(function() {
     $("a[rel='Header']").click(function () {

         $("a[rel='Header']").each(function() {
            if($(this).attr("class")=="sort-up"){$(this).removeClass("sort-up");}
            if($(this).attr("class")=="sort-down"){$(this).removeClass("sort-down");}
        })

         if($(this).attr("class")==""){$(this).addClass("sort-up");}
            $(this).toggleClass("sort-down")
            });      
});

What I am assuming should be done, as soon as the title is clicked, scroll through each title, if it contains a "sort-up" class attribute, remove it; if it contains the "sort-down" class attribute, remove it. Then, for the header with a mouse click, add the "sort-up" class attribute and switch between the "sort-down" attribute. My problem is that when I click on one heading if it uses the sorting class represented in the heading by the down arrow (/) then I go and click on another heading in another column the attribute doesn Remove. However, it will remove the "sort-up" (^) class.
Here is a list of my title in XHTML:

<thead>
            <tr>
                <th><a rel = "Header" href="#" class="">Title</a></th>
                <th><a rel = "Header" href="#" class="">Instructor</a></th>
                <th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" class="">Date</a></th>
                <th class="{sorter: false}">Start/End</th>
                <th><a rel = "Header" href="#" class="">Seats Available</a></th>
                <th><a rel = "Header" href="#" class="">Enrolled</a></th>
                <th><a rel = "Header" href="#" class="">Pre-Requisites</a></th>
                <th class="{sorter: false}">Workshop Actions</th>
            </tr>
        </thead>

UPDATED changes recommended by waxwing, silly errors, this works, I was not paying attention to the hasClass syntax. Thanks.

$(function() {
     $("a[rel='Header']").click(function () {

         $("a[rel='Header']").each(function() {
            if($(this).hasClass("sort-up")){$(this).removeClass("sort-up");}
            if($(this).hasClass("sort-down")){$(this).removeClass("sort-down");}
        })

         if($(this).hasClass("")){$(this).addClass("sort-up");}
             if ($(this).hasClass("sort-up")) { 
                    $(this).removeClass("sort-up").addClass("sort-down"); 
                } else {
                    $(this).removeClass("sort-down").addClass("sort-up");
                }
            if($(this).attr("title") == "Sort column in ascending order"){
                $(this).attr({title : "Sort column in descending order"});}
            else {$(this).attr({title : "Sort column in ascending order"});} 
            });      
});
+1


source to share


2 answers


Try:



$(function() {
  $("a[rel='Header']").click(function () {
    // store the header and this for later use
    var $thead = $(this).parents().filter("thead").slice(0,1);
    var $this = $(this);

    // if we were sort-up - we become sort-down - otherwise we become sort-up
    if ($this.hasClass('sort-up')) { 
      $this.removeClass('sort-up').addClass('sort-down');
    } else {
      $this.removeClass('sort-down').addClass('sort-up');
    }

    // all headers except the one we clicked on - remove sort classes
    $("a[rel='Header']",$thead).not($this[0]).each(function() {
      $(this).removeClass('sort-up').removeClass('sort-down');
    });

    // set link titles based on current class
    $("a[rel='Header']", $thead).each(function() {
      if ($(this).hasClass('sort-up'))
      {
        $(this).attr('title', 'Sort column in descending order');
      } else {
        $(this).attr('title', 'Sort column in ascending order');
      }
    });
    // end click function
  });
});
0


source


It looks like this: you click once and the sort class is added since the class is empty. Then the sort-down class is added because of the next line. So now you have a cell with sorting and sorting. By clicking on another title, neither

if($(this).attr("class")=="sort-up")

nor

if($(this).attr("class")=="sort-down")

will be true, so no classes will be removed. If, on the other hand, you double click on the anchor, the first time it will add both classes, and the second time it will actually switch (remove) the sorting class. Then when you click another column it works as expected.

I suggest a couple of changes. Instead of using



if($(this).attr("class")=="sort-up")

you can use

if ($(this).hasClass("sort-up"))

which will still be true if there are other classes. Also, you cannot use toggleClass in this case. Use something like

if ($(this).hasClass("sort-up")) { 
    $(this).removeClass("sort-up").addClass("sort-down"); 
} else {
    $(this).removeClass("sort-down").addClass("sort-up");
}

which should bind the sort class down on the first click, and then switch between the sort and sort down on subsequent clicks.

0


source






More articles:


All Articles