• Demo and Introduction
  • The HTML and CSS Files
  • The jsLib_event.js and jsLib_dom_ready.js Files
  • The report_library.js File
  • The report_library.js File Continued
  • The Complete report_library.js File and the report.js File
  • TableSort Application

    The purpose of this tutorial is to introduce you to the concept of creating a sortable table using HTML and Javascript. In order to complete this tutorial successfully, you will need a good knowledge of HTML and CSS. You will also need to have at least a basic understanding of Javascript.

    To get started, try out the table. Click on the different arrows to see how the table can be sorted by the information in the various columns in either ascending or descending order. Notice that the last row does not sort along with the rest of the rows. This is because this particular application lists total earnings in the bottom row. If you wanted to create a table that sorted items such as blog posts or files, you can change a parameter in the report.js file and that will allow the last row to sort along with the other values. You can see where this parameter is on the last page of the tutorial.

    Sort Quarterly Report

    Region Q1 Q2 Q3 Q4
    East $1,580.00 $2,305.00 $2,710.00 $1,284.00
    North $1,540.00 $2,010.00 $2,450.00 $1,845.00
    South $1,130.00 $1,168.00 $1,847.00 $2,710.00
    West $1,105.00 $4,102.00 $2,391.00 $1,576.00
    Totals $5,355.00 $9,585.00 $9,398.00 $6,196.00