SOURCE CODE: Basic Table Sort
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Basic Table Sort | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget Uize.Widget.TableSort"/>
  <meta name="description" content="Make your data tables sortable with little to no changes needed to your table HTML. Sort on string columns, date columns, and numerical value columns."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.datatable.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Basic Table Sort
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/table-sort-basic.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>This example demonstrates how the <a href="../reference/Uize.Widget.TableSort.html"><code>Uize.Widget.TableSort</code></a> widget class can be used to add sorting capability to a table on a page - without the table having to be generated by JavaScript, and without the table having to have messy JavaScript event handlers inside the HTML markup, and - most importantly - without the table having to be destroyed and rebuilt. This is an example of one of the several progressive enhancement (aka "unobtrusive JavaScript") features provided by the UIZE JavaScript Framework.</p>
    <p>Move your mouse over the table's column headings and notice how the heading becomes highlighted. Also, a tooltip indicates what action will result from clicking a heading. Click a heading and see how the table is instantaneously sorted by the data in that column. Click again to reverse the sort order. The <code>Uize.Widget.TableSort</code> class adds a few other progressive enhancements. Move your mouse over the rows of data and see how the current row is highlighted. This makes it easier for the eye to follow the row from left to right, allowing you to make sure you're reading data for the row that you think you're reading it for - something that is notoriously difficult for wide tables. Notice also, how a tooltip for each column's data displays the heading of the column - helping with large tables that get scrolled so the user can no longer see the headings.</p>
  </div>

  <!-- table of data to which a Uize.Widget.TableSort instance will be attached -->

  <table id="friendsTable" class="data" cellspacing="0" cellpadding="2" style="margin:auto;">
    <tr class="title">
      <td colspan="8">Table of Friends</td>
    </tr>
    <tr class="heading">
      <td>First Name</td>
      <td>Last Name</td>
      <td>Sex</td>
      <td>Weight</td>
      <td>Hair Color</td>
      <td>Eye Color</td>
      <td>Date of Birth</td>
      <td>Known for How Long</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Engelbrecht</td>
      <td>male</td>
      <td>189 lbs</td>
      <td>brown, light</td>
      <td>gray</td>
      <td>May 5 1963</td>
      <td>5 years</td>
    </tr>
    <tr>
      <td>Alissa</td>
      <td>Pierson</td>
      <td>female</td>
      <td>154 lbs</td>
      <td>brown, dark</td>
      <td>green</td>
      <td>3/29/1972</td>
      <td>2 years</td>
    </tr>
    <tr>
      <td>Paul</td>
      <td>McKinley</td>
      <td>male</td>
      <td>182 lbs</td>
      <td>brown, graying</td>
      <td>gray, blueish</td>
      <td>1971/08/03</td>
      <td>10 years</td>
    </tr>
    <tr>
      <td>Khalid</td>
      <td>Muhalijurinaikar</td>
      <td>male</td>
      <td>165 lbs</td>
      <td>brown, dark</td>
      <td>brown</td>
      <td>15 December 1966</td>
      <td>3 years</td>
    </tr>
    <tr>
      <td>Diego Rodriguez</td>
      <td>Velasquez</td>
      <td>male</td>
      <td>173 lbs</td>
      <td>black</td>
      <td>brown</td>
      <td>7/3/70</td>
      <td>4 years</td>
    </tr>
    <tr>
      <td>Patricia</td>
      <td>Gilby-Elderhans</td>
      <td>female</td>
      <td>191 lbs</td>
      <td>blonde</td>
      <td>blue green</td>
      <td>1967/11/25</td>
      <td>1 year</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Cromley</td>
      <td>male</td>
      <td>159 lbs</td>
      <td>red</td>
      <td>gray</td>
      <td>10 February 1975</td>
      <td>2 years</td>
    </tr>
    <tr>
      <td>Vanessa</td>
      <td>Vermuelen</td>
      <td>female</td>
      <td>152 lbs</td>
      <td>brown, medium</td>
      <td>blue</td>
      <td>8/15/77</td>
      <td>1 year</td>
    </tr>
    <tr>
      <td>Shelley</td>
      <td>Bronsworth</td>
      <td>female</td>
      <td>232 lbs</td>
      <td>blonde, sandy</td>
      <td>blue, grayish</td>
      <td>17 March 1962</td>
      <td>3 years</td>
    </tr>
    <tr>
      <td>Richard</td>
      <td>van Doren</td>
      <td>male</td>
      <td>149 lbs</td>
      <td>brown</td>
      <td>brown</td>
      <td>October 23 1974</td>
      <td>.5 years</td>
    </tr>
  </table>
</div>

<!-- JavaScript code to make the table sortable -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.TableSort'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** spawn (and automatically wire) the Uize.Widget.TableSort instance ***/
      Uize.Widget.TableSort.spawn (
        {
          idPrefix:'friendsTable',
          headingOverClass:'headingOver',
          headingLitClass:'headingLit',
          rowOverClass:'rowOver'
        },
        page
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>