jQuery toggleClass example

Toggle class name on click in jQuery

by veer_vin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table table-bordered table-sortable">
  <thead>
    <tr>
        <th id="facility_header" class="asc">Facility name</th>
        <th>Phone #</th>
        <th id="city_header">City</th>
        <th>Speciality</th>
    </tr>
    </thead>
    <tr>
        <td>III</td>
        <td>55544444</td>
        <td>Bangalore</td>
        <td>MMM</td>
    </tr>
    <tr>
        <td>CCC</td>
        <td>00001111</td>
        <td>Amsterdam</td>
        <td>GGG</td>
    </tr>
    <tr>
        <td>JJJ</td>
        <td>55544444</td>
        <td>London</td>
        <td>MMM</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>33332222</td>
        <td>Paris</td>
        <td>RRR</td>
    </tr>
    <tr>
        <td>ZZZ</td>
        <td>444444444</td>
        <td>Rome</td>
        <td>RRR</td>
    </tr>
    <tr>
        <td>KKKK</td>
        <td>8888888</td>
        <td>Madrid</td>
        <td>RRR</td>
    </tr>
</table>

CSS

.table-sortable > thead > tr > th.asc {
    cursor: pointer;
    position: relative;
}

JavaScript

var table = $('table');
    
    $('#facility_header, #city_header')
        .wrapInner('<span title="sort this column"/>')
        .each(function(){
            
            var th = $(this),
                thIndex = th.index(),
                inverse = false;
            
            th.click(function(){
                //$(this).toggleClass("sortIcon");
                table.find('td').filter(function(){
                    
                    return $(this).index() === thIndex;
                    
                }).sortElements(function(a, b){
                
                		if($(th).hasClass("sortIconA")) {
                    	 $(th).addClass("sortIconD");
                       $(th).removeClass("sortIconA");
                    } else {
                      $(th).addClass("sortIconA");
                      $(th).removeClass("sortIconD");
                    }
                    
                    return $.text([a]) > $.text([b]) ?
                        inverse ? -1 : 1 
                        : inverse ? 1 : -1;
                    
                }, function(){
                    
                    // parentNode is the element we want to move
                    return this.parentNode; 
                    
                });
                
                inverse = !inverse;
                    
            });
                
        });


/**
 * jQuery.fn.sortElements
 * --------------
 * @author James Padolsey (http://james.padolsey.com)
 * @version 0.11
 * @updated 18-MAR-2010
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return...