jQuery addClass example

Change class name on click in jQuery

HTML

<table id="mytable">
<thead><tr>
    <th>Hmmm.</th>
    <th class="clickable" id="worksOnce">Click me for it to work, but next time no Loading</th>
    <th class="clickable" id="sortButNoLoading">Click me to sort but fail to show loading modal</th>
    <th class="clickable" id="loadingButNoSort">Click me to show loading modal but fail to sort</th>
  </tr></thead>
<tbody>
</tbody>
</table>
<div class="waitingModal"></div>

CSS

.waitingModal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('https://findicons.com/files/icons/977/rrze/48/hourglass.png') /* irl I use a local file */
                50% 50% 
                no-repeat;
}

body.loading .waitingModal {
    display: block;
}

th{
  background-color: lightgrey;
}
.clickable {
	cursor: pointer;
	text-decoration: underline;
}

.clickable:hover {
  background-color: palegreen;
}

JavaScript

$(function() {
//generate table
var bignumber=5000;
for (var i = 0; i < bignumber; i++) {
		j=bignumber-i;
		$('#mytable').append('<tr><td>Hmmm.</td><td>'+i+'</td><td>'+j+'</td><td>'+i+'</td></tr>')
}



function loadingNow(){
  var deferred = $.Deferred();
	$('body').change(function(){
		deferred.resolve()
	}).toggleClass("loading");
	return deferred.promise();
}			

var order = 1;

$("#worksOnce").click(function(){
  order *= -1;
	$('body').toggleClass("loading");
	setTimeout(function() {
    sortTable(order,1);
    $('body').toggleClass("loading");
	})
});

$("#sortButNoLoading").click(function(){
  order *= -1;
	$('body').toggleClass("loading");	//happens second
  sortTable(order,1);								//happens first
  //causeerror();										//uncomment to show that loading happened
	$('body').toggleClass("loading"); //happens third
	//});
});

$("#loadingButNoSort").click(function(){
  order *= -1;
	loadingNow().then(function(){
    	sortTable(order,2);
//    	causeError(); // uncomment to stop the third thing
	}).then(function(){
		$('body').toggleClass("loading");
	});
});


// Sorting function
function sortTable(f,n){
		var rows = $('#mytable tbody tr').get();

		rows.sort(function(a, b) {
					var A = getVal(a);
					var B = getVal(b);
					if(A < B) {
						return -1*f;
					}
					if(A > B) {
						return 1*f;
					}
					return 0;
		});
		function getVal(elm){
			var v = $(elm).children('td').eq(n).text().toUpperCase();
			if($.isNumeric(v)){
				v = parseInt(v,10);
			}
			return v;
		}

		$.each(rows, function(index, row) {
			$('#mytable').children('tbody').append(row);
		});
}

});