Sorting columns inside a list alphabetically using jQuery?
<p>Here i am having a unordered list displaying two columns <code>code</code> and <code>name</code>.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</p>

<pre><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 &lt; 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 &lt; l; i++)
    lis[i].innerHTML = vals[i];
}
</code></pre>

<p>and</p>

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

<p>And</p>

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

<p>Any suggestion?</p>

<p>EDIT:</p>

<pre><code>  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 &lt; 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 &lt; nameB) //sort string ascending
                 return -1
             if (nameA &gt; nameB)
                 return 1
             return 0 //default return value (no sorting)
         });

         if (sortDescending) vals.reverse();

         for (var i = 0, l = lis.length; i &lt; 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;
         }
     }
</code></pre>

<p>and</p>

<pre><code> &lt;img src="../Images/Sort_down.png" width="8" height="18" id="stCodeDSC"&gt;
&lt;img src="../Images/sort_up.png" width="8" height="18" id="stNameDSC"&gt;
</code></pre>
