I’m trying to remove sort ascending / descending from any th in the thead and apply it to the newly selected td…
The code below works. But notice that I’m only removing sort from all the th items in the thead. What’s strange is when I try to do .removeClass(‘sort ascending descending’); it no longer allows the th to toggle - meaning that if it’s ascending go descending and vice verse… It’s strange…
function SortSetup(table) {
$('.thead', table).delegate('a', 'click', function(event) {
//First thing we need to do is remove sort from all th
$(this).parents('tr').find('th').removeClass('sort');
var th = $(this).parent('th');
if (th.hasClass('ascending')) {
th.removeClass('ascending').addClass('sort descending');
} else {
th.removeClass('descending').addClass('sort ascending');
}
});
}
<tr class="thead">
<th scope="col" class="cInput"><input type="checkbox" value="users"></th>
<th scope="col" class="c3"><a rel="UserName" href="#">Username</a></th>
<th scope="col" class="c2"><a rel="FirstName" href="#">First Name</a></th>
<th scope="col" class="c2"><a rel="LastName" href="#">Last Name</a></th>
<th scope="col" class="c4"><a rel="Email" href="#">Email</a></th>
<th scope="col" class="c2"><a rel="RoleName" href="#">Role</a></th>
<th scope="col" class="c1"><a rel="CreateDate" href="#">Created</a></th>
<th scope="col" class="c1 sort descending"><a rel="LastLoginDate" href="#">Last Login</a></th>
<th scope="col" class="cActionable"> </th>
</tr>