Table Organize

This script basically allows you to do three things: (1) Re-organize the rows (2) Re-organize the columns (3) Browse the table using the up/down arrows.

Download code Visit demo

Tags: table

<< SlideShow Alternative Bouncer >>

Table Organize demo

Changes to the code below will update the demo above in real time.

<html><head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/table-organize/table-organize/" />
<title>NoFunc: Playlists</title>

<center>
<table id="table" onselectstart="return false" cellspacing="0">
 <thead>
  <tr class="asc" id="head">
   <th style="width: 25px;">#</th>
   <th style="width: 350px;">Title<span></span></th>
   <th>Artist<span></span></th>
   <th>Genre<span></span></th>
   <th style="width: 150px;">Time<span></span></th>
   <th style="width: 150px;">Rating<span></span></th>
   <th style="width: 17px;">&nbsp;</th>
  </tr>
 </thead>
 <tbody id="tbody">
  <tr class="odd"><td>1</td><td>Alone in Kyoto</td><td>Air</td><td>Chillout</td><td>4:49</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>2</td><td>Sexy Boy</td><td>Air</td><td>Chillout</td><td>4:58</td><td>****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd" id=""><td>3</td><td>Surfin On A Rocket</td><td>Air</td><td>Chillout</td><td>3:47</td><td>*****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>4</td><td>Oracle</td><td>Amon Tobin</td><td>Chillout</td><td>4:31</td><td>********</td><td onclick="trRM(this.parentNode);">x</td></tr>
  
  <tr id="" class="odd"><td>5</td><td>Horizon</td><td>Assemblage 23</td><td>Chillout</td><td>7:33</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="even"><td>6</td><td>Gaston Avenue</td><td>Astronautalis</td><td>Chillout</td><td>4:39</td><td>****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="odd"><td>7</td><td>Oceanwalk</td><td>Astronautalis</td><td>Chillout</td><td>4:52</td><td>&nbsp;</td><td onclick="trRM(this.parentNode);">x</td></tr><tr id="" class="even"><td>8</td><td>Sweet Life</td><td>Ashwan</td><td>Chillout</td><td>5:15</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd"><td>9</td><td>Gentle Rain [RJD2 Remix]</td><td>Astrud Gilberto</td><td>Chillout</td><td>6:01</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="" class="even"><td>10</td><td>Army of Me</td><td>Atoi</td><td>Chillout</td><td>4:31</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr id="this" class="odd"><td>11</td><td>Frontier Psychiatrist</td><td>Avalanches</td><td>Chillout</td><td>4:50</td><td>*****</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="even"><td>12</td><td>Tangent</td><td>Beth Orton</td><td>Chillout</td><td>7:28</td><td>&nbsp;</td><td onclick="trRM(this.parentNode);">x</td></tr>
  <tr class="odd"><td>13</td><td>Don't Explain [Dzihan &amp; Kamien Remix]</td><td>Billie Holiday</td><td>Chillout</td><td>4:49</td><td>***</td><td onclick="trRM(this.parentNode);">x</td></tr>
 </tbody>
</table></center>

/* GLOBALS */

var T=$('table'), Tb=T.tBodies[0], Tr=Tb.rows, Trl=Tr.length-1, stop=0, stopTH=0, stopK='', cur=''; trMAP(0,'',1); thMouse($T('th','head'),Array(0,6));

</script>
</body></html>

Sept. 20, 2007, 7:32 a.m. - Diego: Hi, I really liked the Table, but I can't seem to make it work in my computer. Both of the js that you are referencing are available throw the script source? It seems to me that the tableorganize_example.js is missing or something. Besides what is the html code at the end of the script for? I can't save it because of some character encoding problem.
Feb. 26, 2008, 11:50 p.m. - Rzl: Hi, me too really like the table. But it gonna be cool if you could add page pagination.
Feb. 28, 2008, 12:42 p.m. - Pokua: Whenever you refresh, the original table arrangement comes back... you lose all your modifications. How do you prevent that?
April 21, 2008, 7:04 a.m. - Pokua: Okay, I got it to work and also got the Database to record the changes. Howevre, I have a problem with IE. Sometimes, wehen you dray the botoom row, it overlaps the immediate row on top, and the table shortened by one row. Refreshing the page corrects the row overlap. Do you have that issue, and how do I get around that. Thanks
May 8, 2008, 3:30 a.m. - David: yeah Diego is correct, when downloading the JS files, the code does not work. The only way to get it working is to have ajaxdaddy.com as the base dir. Whats wrong?
April 11, 2009, 11:51 a.m. - _asterix_: Thx for this example! Good Inspiration for a beauity Table-Design. ;-)
May 4, 2009, 1:46 a.m. - Damin: Hi, I really liked the Table, but... Are there a method to scroll the items without move the header? When the list is too long, I can't see the header.
May 14, 2009, 2:08 a.m. - ravikumar: how can i use this example. if i want to get the info from db
June 5, 2009, 8:44 a.m. - Alex: Thank you for the script.
July 31, 2009, 10:02 a.m. - Brian: There's a bug in the source code. The apostrophe in row 13, "Don't Explain" messes with the swapping. You should do a string replace "'" with "\'" on the table data when swapping rows.
Dec. 3, 2009, 4:20 p.m. - Other Alex: Thanks for the great example that will be used in my custom photo contest. As a thanks I offer a fix for the IE issue. File: tableorganize_example.js Change: Tb.insertBefore(z,Tr[b]); To This: if(n!=(Trl-1)&&b!=Trl) { Tb.insertBefore(z,Tr[b]); } else { Tb.appendChild(z,Tr[b]); }
Dec. 16, 2009, 11:11 a.m. - Ian: Table's nice, but there is a bug in the script - the apostrophes aren't being escaped. You can see this in the demo above if you try to swap the artist and title columns, "Don't Explain" (row 13) isn't being carried over.
Sept. 17, 2011, 8:27 p.m. - Geoff: I am having the same problem that Diego and David had. It only works if I have ajaxdaddy.com as the base dir. And if I have that, it messes up my menus so that I can't get to the rest of my site.