Sorting columns inside a list alphabetically using jQuery?

Question

Here i am having a unordered list displaying two columns code and name .I have used javascript for sorting the list.But it is sorting the whole list.I need to sort the list based on code and name that means two buttons will be there one button is for sorting the list based on code and the other button is for sorting the list based on name.Here is my code

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

 // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

and

 window.onload = function () {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             sortUnorderedList("list3", desc);
             desc = !desc;
             return false;
         }
     }

And

<div id="l1" style="width: 100%; height: 171px; overflow: auto; ">
<asp:ListView ID="ListView1" runat="server" ViewStateMode="Disabled">
<LayoutTemplate>
<ul id="list3" class="conn" style="width: 90%; height: 171px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="add" onclick="hilite()" id ="l3"  >
 <table style="width: 100%;">
<tr  style="width: 100%;">
<td class="border2" style="width: 50%;">
<%# Eval("code") %>
</td>
<td class="border2" style="width: 50%;">
<%# Eval("Name") %>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</asp:ListView>
</div>

Any suggestion?

EDIT:

  function sortUnorderedList(ul, sortDescending, sortClass) {
         if (typeof ul == "string") {
             ul = document.getElementById(ul);
         }
         var lis = ul.getElementsByTagName("LI");
         var vals = [];
         for (var i = 0, l = lis.length; i < l; i++) {
             vals.push({
                 sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
                 val: lis[i].innerHTML
             });
         }

         vals.sort(function (a, b) {
             var nameA = a.sortFieldVal.toLowerCase(), nameB = b.sortFieldVal.toLowerCase()
             if (nameA < nameB) //sort string ascending
                 return -1
             if (nameA > nameB)
                 return 1
             return 0 //default return value (no sorting)
         });

         if (sortDescending) vals.reverse();

         for (var i = 0, l = lis.length; i < l; i++)
             lis[i].innerHTML = vals[i].val;
     }

     window.onload = function () {
         var desc = false;
         document.getElementById("stCodeDSC").onclick = function () {
             sortUnorderedList("list3", desc, "code");
             desc = !desc;
             return false;
         }

         document.getElementById("stNameDSC").onclick = function () {
             sortUnorderedList("list3", desc, "name");
             desc = !desc;
             return false;
         }
     }

and

 <img src="../Images/Sort_down.png" width="8" height="18" id="stCodeDSC">
<img src="../Images/sort_up.png" width="8" height="18" id="stNameDSC">

Answer 1

Hey You probably need some clarity in HTML mentioned, perhaps this what you are looking for: demo http://jsfiddle.net/jKSsW/

This is in Jquery. PLease let me know if you tagged question wrong I will remove my post!

Hope it helps, cheers!