Skip to content

Instantly share code, notes, and snippets.

@ShekharReddy4
Created March 6, 2022 06:28
Show Gist options
  • Save ShekharReddy4/74fb4c57a89d5807ef983acec85c52ba to your computer and use it in GitHub Desktop.
Save ShekharReddy4/74fb4c57a89d5807ef983acec85c52ba to your computer and use it in GitHub Desktop.
Sort Table Rows by Table Headers - Ascending and Descending (jQuery)
<p>Sort Table Rows by Clicking on the Table Headers - Ascending and Descending (jQuery)</p>
<div class="container">
<div class="table">
<div class="table-header">
<div class="header__item"><a id="name" class="filter__link" href="#">Name</a></div>
<div class="header__item"><a id="wins" class="filter__link filter__link--number" href="#">Wins</a></div>
<div class="header__item"><a id="draws" class="filter__link filter__link--number" href="#">Draws</a></div>
<div class="header__item"><a id="losses" class="filter__link filter__link--number" href="#">Losses</a></div>
<div class="header__item"><a id="total" class="filter__link filter__link--number" href="#">Total</a></div>
</div>
<div class="table-content">
<div class="table-row">
<div class="table-data">Tom</div>
<div class="table-data">2</div>
<div class="table-data">0</div>
<div class="table-data">1</div>
<div class="table-data">5</div>
</div>
<div class="table-row">
<div class="table-data">Dick</div>
<div class="table-data">1</div>
<div class="table-data">1</div>
<div class="table-data">2</div>
<div class="table-data">3</div>
</div>
<div class="table-row">
<div class="table-data">Harry</div>
<div class="table-data">0</div>
<div class="table-data">2</div>
<div class="table-data">2</div>
<div class="table-data">2</div>
</div>
</div>
</div>
</div>
var properties = [
'name',
'wins',
'draws',
'losses',
'total',
];
$.each( properties, function( i, val ) {
var orderClass = '';
$("#" + val).click(function(e){
e.preventDefault();
$('.filter__link.filter__link--active').not(this).removeClass('filter__link--active');
$(this).toggleClass('filter__link--active');
$('.filter__link').removeClass('asc desc');
if(orderClass == 'desc' || orderClass == '') {
$(this).addClass('asc');
orderClass = 'asc';
} else {
$(this).addClass('desc');
orderClass = 'desc';
}
var parent = $(this).closest('.header__item');
var index = $(".header__item").index(parent);
var $table = $('.table-content');
var rows = $table.find('.table-row').get();
var isSelected = $(this).hasClass('filter__link--active');
var isNumber = $(this).hasClass('filter__link--number');
rows.sort(function(a, b){
var x = $(a).find('.table-data').eq(index).text();
var y = $(b).find('.table-data').eq(index).text();
if(isNumber == true) {
if(isSelected) {
return x - y;
} else {
return y - x;
}
} else {
if(isSelected) {
if(x < y) return -1;
if(x > y) return 1;
return 0;
} else {
if(x > y) return -1;
if(x < y) return 1;
return 0;
}
}
});
$.each(rows, function(index,row) {
$table.append(row);
});
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;
$color-alpha: #1772FF;
$color-form-highlight: #EEEEEE;
*, *:before, *:after {
box-sizing:border-box;
}
body {
padding:$base-spacing-unit;
font-family:'Source Sans Pro', sans-serif;
margin:0;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
}
.container {
max-width: 1000px;
margin-right:auto;
margin-left:auto;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.table {
width:100%;
border:1px solid $color-form-highlight;
}
.table-header {
display:flex;
width:100%;
background:#000;
padding:($half-spacing-unit * 1.5) 0;
}
.table-row {
display:flex;
width:100%;
padding:($half-spacing-unit * 1.5) 0;
&:nth-of-type(odd) {
background:$color-form-highlight;
}
}
.table-data, .header__item {
flex: 1 1 20%;
text-align:center;
}
.header__item {
text-transform:uppercase;
}
.filter__link {
color:white;
text-decoration: none;
position:relative;
display:inline-block;
padding-left:$base-spacing-unit;
padding-right:$base-spacing-unit;
&::after {
content:'';
position:absolute;
right:-($half-spacing-unit * 1.5);
color:white;
font-size:$half-spacing-unit;
top: 50%;
transform: translateY(-50%);
}
&.desc::after {
content: '(desc)';
}
&.asc::after {
content: '(asc)';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment