Fast Table Sorting With jQuery

This is a small, cross-browser and blazing fast jQuery table sort script used to sort table columns in Ascending and Descending order by clicking the table headers.

How to use it:

1. Add anchor links to your table headers.

<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>

2. Add the CSS class 'table-data' to your tabular data to be sorted.

<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>

3. Style the table sorting links in the CSS.

.filter__link {
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-left: 24px;
  padding-right: 24px;
}

.filter__link::after {
  content: '';
  position: absolute;
  right: -18px;
  color: white;
  font-size: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.filter__link.desc::after { content: '(desc)'; }

.filter__link.asc::after { content: '(asc)'; }

4. Include the necessary jQuery JavaScript library at the bottom of the html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>

5. The main jQuery script to enable the sorting function on the html table.

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;
  });

});

---

This awesome jQuery plugin is developed by nathancockerill. For more Advanced Usages, please check the demo page or visit the official website.