title: Trying to sort the table column by clicking the header of the table
body: <p>I am trying to sort the table column values by clicking on the header  using Javascript and html and PHP and this is  my code:</p>
  
  <pre><code>&lt;?php
  $rows=array();
  $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As FullName,usrNickname AS Nickname,";
  $query.= "usrEmail As EmailAddress,usrGender AS  Gender,DATE_FORMAT(usrDOB,'%d%m%y') As DOB,usrBelt AS BeltId";
  $query.= " FROM user";
  $result = mysql_query($query);
  echo mysql_error();
  if($result)
  {
      while($row=mysql_fetch_assoc($result))
      {
          $rows[] = $row;
      }
  }
  ?&gt;
  &lt;script type="text/javascript"&gt;
  function setDataType(cValue)
  {
      // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
      // SORTING WHEN IN THE SORT FUNCTION
      var isDate = new Date(cValue);
      if (isDate == "NaN")
      {
          if (isNaN(cValue))
          {
              // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
              // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
              cValue = cValue.toUpperCase();
              return cValue;
          }
          else
          {
              // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
              // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
              // THE NUMBER WHEN IT IS A STRING
              var myNum;
              myNum = String.fromCharCode(48 + cValue.length) + cValue;
              return myNum;
          }
      }
      else
      {
          // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
          // AND RETURN THE STRING NUMBER
          //BUG - STRING AND NOT NUMERICAL SORT .....
          // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5  etc.)
          var myDate = new String();
          myDate = isDate.getFullYear() + " " ;
          myDate = myDate + isDate.getMonth() + " ";
          myDate = myDate + isDate.getDate(); + " ";
          myDate = myDate + isDate.getHours(); + " ";
          myDate = myDate + isDate.getMinutes(); + " ";
          myDate = myDate + isDate.getSeconds();
          //myDate = String.fromCharCode(48 + myDate.length) + myDate;
          return myDate ;
      }
  }
  function sorttable(col, tabletosort)
  {
      var iCurCell = col + tableToSort.cols;
      var totalRows = tableToSort.rows.length;
      var bSort = 0;
      var colArray = new Array();
      var oldIndex = new Array();
      var indexArray = new Array();
      var bArray = new Array();
      var newRow;
      var newCell;
      var i;
      var c;
      var j;
  
      for (i=1; i &lt; tableToSort.rows.length; i++)
      {
          colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
          iCurCell = iCurCell + tableToSort.cols;
      }
      for (i=0; i &lt; colArray.length; i++)
      {
          bArray[i] = colArray[i];
      }
      colArray.sort();
      for (i=0; i &lt; colArray.length; i++)
      { // LOOP THROUGH THE NEW SORTED ARRAY
          indexArray[i] = (i+1);
          for(j=0; j &lt; bArray.length; j++)
          { // LOOP THROUGH THE OLD ARRAY
              if (colArray[i] == bArray[j])
              { 
                  for (c=0; c&lt;i; c++)
                  {
                      if ( oldIndex[c] == (j+1) )
                      {
                          bSort = 1;
                      }
                  }
                  if (bSort == 0)
                  {
                      oldIndex[i] = (j+1);
                  }
                  bSort = 0;
              }
          }
      }
  
      for (i=0; i&lt;oldIndex.length; i++)
      {
          newRow = tableToSort.insertRow();
          for (c=0; c&lt;tableToSort.cols; c++)
          {
              newCell = newRow.insertCell();
              newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
          }
      }
      for (i=1; i&lt;totalRows; i++)
      {
          tableToSort.moveRow((tableToSort.rows.length -1),1);
      }
      for (i=1; i&lt;totalRows; i++)
      {
          tableToSort.deleteRow();
      }   
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is my html and PHP script is:  </p>
  
  <pre><code>&lt;link href="../../css/styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;div class="subheader" style="margin:16px 0 0;width:980px font-style:bold"&gt;
      &lt;div   class="subheaderl"&gt;&lt;/div&gt;
      &lt;div class="subheaderr"&gt;&lt;/div&gt;
      View Registered User List
  &lt;/div&gt;
  &lt;div class="div" style="overflow-y:scroll;height:500px;"&gt;
      &lt;table name="userlist" id ="userlist" height= "600" width="800"&gt;
          &lt;tr style="text-align:top; vertical-align = top"&gt;
              &lt;thead style="display:inline-block;font-weight:bold;line-spacing:02px"&gt;  
                  &lt;td colspan="0.4" rowspan="1.0"&gt;&lt;a href="javascript:sortTable(0, userlist);"&gt; Full Name&lt;/a&gt;&lt;/td&gt;
                  &lt;td colspan="0.4" rowspan ="1.0"&gt;&lt;a href="javascript:sortTable(1, userlist);"&gt;NickName&lt;/a&gt;&lt;/td&gt;
                  &lt;td colspan="0.4" rowspan ="1.0"&gt;&lt;a href="javascript:sortTable(2, userlist);"&gt;Email Address&lt;/a&gt;&lt;/td&gt;
                  &lt;td colspan="0.4" rowspan ="1.0"&gt;&lt;a href="javascript:sortTable(3, userlist);"&gt;Gender&lt;/a&gt;&lt;/td&gt;
                  &lt;td colspan="0.4" rowspan ="1.0"&gt;&lt;a href="javascript:sortTable(4, userlist);"&gt;DateofBirth&lt;/a&gt;&lt;td&gt;
                  &lt;td colspan="0.4" rowspan ="1.0"&gt;&lt;a href="javascript:sortTable(5, userlist);"&gt;BELT ID&lt;/a&gt;&lt;/td&gt;      
              &lt;/thead&gt; 
              &lt;?php foreach ($rows as $row){?&gt;
              &lt;tr style="font-size:small; word-spacing:10px;"&gt;
                  &lt;td colspan="0.4"&gt;&lt;?php echo $row['FullName']?&gt;&lt;/td&gt;
                  &lt;td colspan="0.4"&gt;&lt;?php echo $row['Nickname']?&gt;&lt;/td&gt;
                  &lt;td  colspan="0.4"&gt;&lt;?php echo $row['EmailAddress']?&gt;&lt;/td&gt;
                  &lt;td colspan="0.4"&gt;&lt;?php echo $row['Gender']?&gt;&lt;/td&gt;
                  &lt;td colspan="0.4"&gt;&lt;?php echo $row['DOB']?&gt;&lt;/td&gt;
                  &lt;td  colspan="0.4"&gt;&lt;?php echo $row['BeltId']?&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;?php }?&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="divbottom"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Problem 1:the columns are does not sorted when I click on the header and I am not able to see the table header names </p>
  
  <p>Problem 2: the table structure is not dispalying properly </p>
  
  <p>My problem is I am not able to see the table header names (Full Name,NickName,EmailAddress,Gender,DateofBirth,BELT ID)
  those are invisible and the table must be like this </p>
  
  <pre><code>     Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID
  
       xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx
       xxxxxx       xxxx        xxxxxx         xxxxx      xxxx          xxxxx
  </code></pre>
  
  <p>it was displaying like this: </p>
  
  <pre><code>       Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID
  
         xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx
  
  
  
         xxxxx       xxxxx          xxxxx         xxxx     xxxxxx           xxxxx
  </code></pre>
  
  <p>Can anyone help on this one please?
  Do I need to change the Javascript function or am I defining function in wrong place or in wrong manner?</p>
  
  <p>Would anyone please tell? </p>
  
  <p>Would anyone please help me on this?</p>