Fast Table Sorting With jQuery
File Size: | 2.23 KB |
---|---|
Views Total: | 5153 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.