Skip to main content

using javascript to sort a dynamic html table

using javascript to sort a dynamic html table

[ click the column headers on the html table to sort the column ]


[ dynamicTable.html ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Dynamic Data Table</title>
  
  <script type="text/javascript" src="dynamicTable.js"></script>
  <link rel="stylesheet" href="dynamicTable.css" />

  <script type="text/javascript">
    function load() {
      var columnNames = ["dateColumn", "numberColumn", "stringColumn", "booleanColumn"];

      var dataRows = [
        [new Date(2001, 2, 6),  8,  "into",        false],
        [new Date(2006, 6, 21), 5,  "accessory",   true],
        [new Date(2001, 0, 12), 3,  "rubber",      true],
        [new Date(2003, 6, 21), 6,  "a",           false],
        [new Date(2005, 6, 12), 4,  "fashion",     false],
        [new Date(1982, 3, 1),  10, "Incorporate", false],
        [new Date(2001, 9, 10), 9,  "your",        true],
        [new Date(2002, 4, 1),  1,  "wardrobe",    true],
        [new Date(2003, 6, 13), 7,  "as",          true],
        [new Date(2001, 1, 1),  2,  "chickens",    false]
      ];
      
      var dataTable = new DynamicTable(document.getElementById("dataTable"));
      
      dataTable.loadData(columnNames, dataRows);
    }
  </script>
</head>

<body onload="load()">
  <p>
    <table id="dataTable">
      <thead>
        <tr>
          <th name="numberColumn">Some Numbers</th>
          <th name="booleanColumn">Some Booleans</th>
          <th name="dateColumn">Some Dates</th>
          <th name="stringColumn">Some Strings</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </p>
</body>
</html>


[ dynamicTable.js ]
function DynamicTable(node) {
 this.table = node;
 this.dgColumns;
 this.dgData;
}


DynamicTable.prototype.loadData = function(colNames, dgValues) {
 this.dgColumns = colNames;
 this.dgData = dgValues;
 
 this.eventHandlers();
 this.showGrid(this);
 
}

DynamicTable.prototype.showGrid = function(self) {
// self.sortOnColumn(columnName);
    
 var grid = new Grid(self);
 var rows = grid.createRows();
 
 var tbody = self.table.getElementsByTagName("tbody")[0];
  
 var parentTbodyNode = tbody.parentNode;
 var newTbody = document.createElement("tbody");
 parentTbodyNode.removeChild(tbody);
 parentTbodyNode.appendChild(newTbody);
 
 while(rows.length &gt; 0) {
  newTbody.appendChild(rows[0]);
 }
}


function Handler() {
 this.columnName;
 this.self;
}

Handler.prototype.set = function(columnName, self) {
 this.columnName = columnName;
 this.self = self;
}

Handler.prototype.doSort = function() {
 this.self.sortOnColumn(this.columnName);
}


function handlerSort(columnName,self) {
 return function () {
   
  self.sortOnColumn(columnName);
    
  var grid = new Grid(self);
  var rows = grid.createRows();
 
  var tbody = self.table.getElementsByTagName("tbody")[0];
  
  var parentTbodyNode = tbody.parentNode;
  var newTbody = document.createElement("tbody");
  parentTbodyNode.removeChild(tbody);
  parentTbodyNode.appendChild(newTbody);
  
  while(rows.length &gt; 0) {
   newTbody.appendChild(rows[0]);
  }
    
   };
}


DynamicTable.prototype.eventHandlers = function() {
 var elements = this.table.getElementsByTagName("th");

 for (var x = 0; x &lt; elements.length; x++) {
 
  var columnName = elements[x].getAttribute("name");

  addListener(elements[x], "click", handlerSort(columnName, this), false);
 } 
 
}

DynamicTable.prototype.sortOnColumn = function(columnName) {
    
 switch( columnName ) {
  case "numberColumn":
   this.dgData = this.dgData.sort(sortNumbers);
   break;
  case "booleanColumn":
   this.dgData = this.dgData.sort(sortBoolean);
   break;
  case "dateColumn":
   this.dgData = this.dgData.sort(sortDates);
   break;
  case "stringColumn":
   this.dgData = this.dgData.sort(sortStrings);
   break;
  default:
   alert("noSortAvailable" + "--" + columnName);
   break;
 }
}

function addListener(element, type, expression, bubbling) {

 bubbling = bubbling || false;
 
 if(window.addEventListener) { // Standard
  element.addEventListener(type, expression, bubbling);
  return true;
 } else if(window.attachEvent) { // IE
  element.attachEvent('on' + type, expression);
  return true;
 } else return false;
}

function sortDates(sortItemA, sortItemB) {
 var itemA = sortItemA[0];
 var itemB = sortItemB[0];

 if (itemA &lt; itemB) {
  return -1;
 } else if (itemA &gt; itemB) {
  return 1;
 } else if (itemA == itemB) {
  return 0;
 }   
}

function sortBoolean(sortItemA, sortItemB) {
 var itemA = sortItemA[3];
 var itemB = sortItemB[3];

 if (itemA &lt; itemB) {
  return -1;
 } else if (itemA &gt; itemB) {
  return 1;
 } else if (itemA == itemB) {
  return 0;
 }   
}
function sortNumbers(sortItemA, sortItemB) {
 var itemA = sortItemA[1];
 var itemB = sortItemB[1];

 if (itemA &lt; itemB) {
  return -1;
 } else if (itemA &gt; itemB) {
  return 1;
 } else if (itemA == itemB) {
  return 0;
 }   
}
function sortStrings(sortItemA, sortItemB) {
 var itemA = sortItemA[2];
 var itemB = sortItemB[2];

 if (itemA &lt; itemB) {
  return -1;
 } else if (itemA &gt; itemB) {
  return 1;
 } else if (itemA == itemB) {
  return 0;
 }   
}

function sortNone(sortItemA, sortItemB) {
 
 return 0;

}


function Grid(self) {
 this.self = self;
 this.columnsToPopulate;
 
 this.columnToFillOrder();
}

Grid.prototype.columnToFillOrder = function() {

 this.columnsToPopulate = new Array();
 
 var elements = this.self.table.getElementsByTagName("th");

 for (var x = 0; x &lt; elements.length; x++) {
 
  this.columnsToPopulate[x] = elements[x].getAttribute("name");
 }
}

Grid.prototype.createRows = function() {

 var parentNode = document.createElement("div");

 for (var dataRowNum = 0; dataRowNum &lt; this.self.dgData.length; dataRowNum++) {

  var rowNode = document.createElement("tr");
  
  for (var dataColumnNum = 0; dataColumnNum &lt; this.columnsToPopulate.length; dataColumnNum++) {   

   var node = document.createElement("td");
   var text;

   switch( this.columnsToPopulate[dataColumnNum] ) {
   case this.self.dgColumns[0]:
    text = document.createTextNode(this.self.dgData[dataRowNum][0]);
    break;
   case this.self.dgColumns[1]:
    text = document.createTextNode(this.self.dgData[dataRowNum][1]);
    break;
   case this.self.dgColumns[2]:
    text = document.createTextNode(this.self.dgData[dataRowNum][2]);
    break;
   case this.self.dgColumns[3]:
    text = document.createTextNode(this.self.dgData[dataRowNum][3]);
    break;
   default:
    break;
   }
   
   node.appendChild(text);    
     
   rowNode.appendChild(node);
  }
  
  parentNode.appendChild(rowNode);
  
 }
 
 var rows = parentNode.getElementsByTagName("tr");

 return rows;
}

[ dynamicTable.css ]
table {
 border-width: 2px 2px 2px 2px;
 border-spacing: 3px;
 border-style: solid solid solid solid;
 border-color: blue blue blue blue;
 border-collapse: separate;
 background-color: rgb(255, 245, 238);
}
table th {
 border-width: 3px 3px 3px 3px;
 padding: 3px 3px 3px 3px;
 border-style: dotted dotted dotted dotted;
 border-color: green green green green;
 background-color: rgb(250, 240, 230);
 -moz-border-radius: 6px 6px 6px 6px;
}
table td {
 border-width: 3px 3px 3px 3px;
 padding: 3px 3px 3px 3px;
 border-style: dotted dotted dotted dotted;
 border-color: green green green green;
 background-color: rgb(250, 240, 230);
 -moz-border-radius: 6px 6px 6px 6px;
}

you may download the dynamic javascript table sort example here:
http://linuxclicksblog.appspot.com/artifacts/javascript/dynamicTable/dynamicTable.html
http://linuxclicksblog.appspot.com/artifacts/javascript/dynamicTable/dynamicTable.js
http://linuxclicksblog.appspot.com/artifacts/javascript/dynamicTable/dynamicTable.css

Comments

Popular posts from this blog

clonezilla - creating a wifi ad-hoc hotspot and running a ssh server

Here are some notes on connecting to a wifi-hotspot from a running clonezilla
live-cd.

[ target machine to save a backup hard-disk clone/image ]
[ target machine is also running a wifi hotspot and an ssh server ]
Ubuntu 11.04 - Natty Narwhal

terry@terry-HP:~$ uname -a
Linux terry-HP 2.6.38-10-generic #46-Ubuntu SMP Tue Jun 28 15:07:17 UTC 2011 x86_64 x86_64 x86_64 GNU/Linux
terry@terry-HP:~$

[ Creating an 'ad-hoc' wifi spot ]
Click the 'up down arrow' icon ( or what have you )


[ choose menu item to create a wifi ad-hoc hotspot ]

[ create the ad-hoc wifi hotspot ]

[ the eth1 connection is the created ad-hoc network with an essid of 'terry' ]

[ the ad-hoc wifi hotspot is now visible on the 'host' computer and other computer as well now ]

[ enter the following on the machine being cloned with clonezilla
[ at the appropriate place in the clonezilla backup image step ]
terry@terry-HP:~$ ip link set wlan0 down
terry@terry-HP:~$ iwconfig wlan0 mode ad-hoc
terry@…

Translators, maps, conduits, and containers

Interpreters
The Amiga had a hardware emulator which transformed instruction to instruction to a dedicated x86 hardware interpreter in the Amiga could run Microsoft DOS spreadsheet programs in the Amiga OS.

MS-DOS on Amiga via Sidecar or Bridgeboard[edit]
MS-DOS compatibility was a major issue during the early years of the Amiga's lifespan in order to promote the machine as a serious business machine. In order to run the MS-DOS operating system, Commodore released the Sidecar for the Amiga 1000, basically a 8088 board in a closed case that connected to the side of the Amiga. Clever programming (a library named Janus, after the two-faced Roman god of doorways) made it possible to run PC software in an Amiga window without use of emulation. At the introduction of the Sidecar the crowd was stunned to see the MS-DOS version of Microsoft Flight Simulator running at full speed in an Amiga window on the Workbench.

Later the Sidecar was implemented on an expansion card named "Bridgebo…

Use Gwenview to upload images to picasaweb.google.com

Use Gwenview to upload images to https://picasaweb.google.com/

install the following KDE4 plugins:

terry@narwhal:~/download$ sudo apt-get install kipi-plugins
From Linux Clicks...
the Gwenview application...

From Linux Clicks...