Fast Table Sorting With jQuery

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.

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.

  • Publication date: 05.02.2018
  • Source