Sortable Table Columns

paakay · Aug 25, 2005

I am trying to make some of the columns of my tables sortable in the browser.

I do not know how to go about it.

I will be very grateful to get a javascript code that can do that for me.

Thanks in advance guys.

xwb · Aug 27, 2005

Are you retrieving the data from a database or is it just data in a table that you want sorted.

paakay · Aug 27, 2005

Hi xwb,

Its a table that I wanted to sort by columns. I will be very grateful if you can help.

On the other hand it will be of use for me to know how to do it when retrieving data from the database too. Eventually, I may have to come to that. So if you can help with that too it will be great.

Thanks xwb, for showing interest in my problems.

xwb · Aug 27, 2005

I'll try to work out the Javascript/vbscript for sorting a table. For retrieving data from a database, add an "ORDER BY" to the SELECT statement. For instance

Code:

SELECT Name,Telephone FROM AddressBook ORDER BY Name ASCENDING

xwb · Aug 29, 2005

This one uses selection sort - not a lot of difference between sorting techniques for less than 25 items. For larger amounts consider Shell sort or Quicker sort.

Code:

<HTML>
<HEAD>
<TITLE>Sorted table</TITLE>
</HEAD>
<BODY>

<P>&nbsp;</P>
<script language="javascript">
var gOrder, gRow, gRowMax

// Step 1: Set up the columns
var colName = 0, colPhone = 1, colMax = 2

// Step 2: Constructor
function Row (sName, sPhone)
{
   this.info = Array (colMax)
   this.info[colName] = sName
   this.info[colPhone] = sPhone
}

// Step 3: Set up the comparison routine
function RowCompare (lrow, rrow)
{
   var lhs, rhs
   lhs = gRow[lrow]
   rhs = gRow[rrow]
   // Names ascending
   if (lhs.info[colName] < rhs.info[colName])
      return 1
   
   if (lhs.info[colName] > rhs.info[colName])
      return 0
   
   // Phones descending
   if (lhs.info[colPhone] > rhs.info[colPhone])
      return 1
   
   return 0
}

// Step 4: fill in the data and that's it
function TableCreate ()
{
   gRow = Array (10)
   gRowMax = 0
   gRow[gRowMax++] = new Row ("Mum", "1234")
   gRow[gRowMax++] = new Row ("Dad", "5678")
   gRow[gRowMax++] = new Row ("Aunt Sam", "9012")
   gRow[gRowMax++] = new Row ("Uncle Luck", "3456")
   gRow[gRowMax++] = new Row ("Uncle David", "7890")
   gRow[gRowMax++] = new Row ("Dad", "5778")
   gRow[gRowMax++] = new Row ("Dad", "5578")
}

// Display the table - don't touch
function TableDisp ()
{
   var i, c, cell
   document.writeln ("<table>")
   for (i = 0; i < gRowMax; i++)
   {
      document.write ("<tr>")
      cell = gOrder[i]
      for (c = 0; c < colMax; c++)
         document.write ("<td>" + gRow[cell].info[c] + "</td>")
      document.write ("</tr>")
   }
   document.writeln ("</table>")
}

// Sort the table using selection sort - don't touch
function TableSort ()
{
   var i, j, temp
   gOrder = Array (gRowMax)
   for (i = 0; i < gRowMax; i++)
      gOrder[i] = i
   
   for (i = 0; i < (gRowMax - 1); i++)
   {
      for (j = i + 1; j < gRowMax; j++)
      {
         if (RowCompare (gOrder[i], gOrder[j]) == 0)
         {
            temp = gOrder[i]
            gOrder[i] = gOrder[j]
            gOrder[j] = temp
         }
      }
   }
}

// Do the works
TableCreate ()
TableSort ()
TableDisp ()
</script>
</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Sortable Table Columns

paakay

Programmer

xwb

Programmer

paakay

Programmer

xwb

Programmer

xwb

Programmer

Similar threads

Part and Inventory Search

Sponsor