Table Sort

JavaScript Widget

by Mark Brautigam

Get It

You can make this project with just this one JavaScript file:

» hfstablesort.js

Purpose

The purpose of this project is to let you easily sort tables in ascending or descending order. It has these features:

How It Works

Include the JavaScript file, set special classes on your table, and call the init method.

When the table rows get moved to new places in the table, any special formatting gets moved with them. This includes rows that might have been made invisible or rows that have been colored differently.

Getting Started

  1. Reference the hfstablesort.js JavaScript file in the head section of your HTML file.
  2. <script type='text/javascript' src='hfstablesort.js'><script>
    
  3. Give your table two special classes. The class hfstablesort says your table is sortable. The second class, hfssort_xxxxxx, tells it what kind of sort to do on each column, where xxxxxx is a string of mnemonics that indicate the sorts. Here is an example:
    <table class="hfstablesort hfssort_haalana">
    
  4. Available sort options are these:
    a = alphabetic
    b = alphanumeric (with non-alphanumeric characters sorted low)
    d = date
    l = last name
    n = numeric
    p = round dance phase
    s = square dance level
    w = day of week
    z = file size
    hijk = custom sorts
  5. Invoke the hfsTableSortInit() method in a script at the very bottom of your HTML file or in an onload() handler.
    hfsTableSort.hfsTableSortInit();
    
  6. (Optional.) Write the custom functions for any custom sorts you specify. The custom function accepts two parameters a and b. Each parameter is an array, of which the first element is the sort key, and the others can be ignored. So a prototypical custom sort function would look like this:
    function sort_custom_h (a,b) 
    {
      return (some_comparison (a[0], b[0])); // compare the keys
    }

Example

The sample below has the following features:

TermCourseDescriptionInstructorGrade%Certificate
Spr 12GDES 047Web AnimationSylvia MinA103core
Spr 12GRART 062Adobe IllustratorSylvia MinA102core
Sum 12GDES 035Graphic DesignRick RivasA92core
Sum 12GDES 045Web DesignMark GarrettA98core
Sum 12Art 034ADigital Art (Photoshop)Kristen LindsethAelective
Fall 12GRART 064PhotoshopRick RivasA93core
Fall 12GDES 046Dreamweaver and CSSMark GarrettA97core
Fall 12GDES 049Wordpress and jQueryThomas LothianAcore
Fall 12GDES 070User ExperienceJeff RascovA100core
Fall 12CA 086PHP and mySQLHelen SunA98core
Spr 13GDES 060Page Layout & TypographyMelanie KayeAcore
Spr 13GDES 085PortfolioMelanie KayeAcore
Spr 13CA 088A/BJavaScriptCurtis PembrookA100core
Spr 13CA 084ADatabase and SQLHelen SunA94.5elective
Spr 13GRART 068Advanced PhotoshopRick RivasA97elective
Sum 13Art 031ADrawingMark EngelA94core
Sum 13Art 033A2D DesignMark EngelA98elective
Sum 13CS 001AJava ProgrammingJesse CecilA+101elective
Sum 13CS 024CPythonKerry HayesA100
Fall 13GRART 063Adobe InDesignPeter KuoA96core
Fall 13GDES 055Branding & AgencyMelanie KayeAcore
Fall 13CA 046EIntermediate PowerpointJudie GoldenA100
Fall 13CA 063BIntermediate ExcelPat HudakA113
Fall 13CS 001BIntermediate JavaL. KrishnamurthyA+100elective
Fall 13CS 020AC# ProgrammingHadeel AmmariA96elective
Spr 14GDES 051Mobile App & Web DesignMark GarrettA100elective
Spr 14CIS 063Android ProgrammingHelen SunA99
Spr 14CIS 037.6Mac and iPhone Prog.Kelly CooperA
Sum 14CIS 007Python ProgrammingMaher MneimnehA95
Copyright © 2007–2016 Mark Brautigam

The Purpose

I wanted to have menus so users can quickly navigate from project to project within each category (e.g. Animation, JavaScript, PHP/mySQL).

I also wanted to show the assignment, rationale, or case study for each project without it intruding on the project itself.

And I wanted to have quick access to validation methods that I use frequently while doing development.