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">

Google is your friend. Search "jquery sort alphabet plugin" in google and you should get some useful results. — Simon, Mar 26 '12 at 07:53
possible duplicate of [How may I sort a list alphabetically using jQuery?](http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery) — PiTheNumber, Mar 26 '12 at 07:56
Add separate classes to your list items `class="code"` and `class="name"` then instead of `getElementsByTagName("LI")` you could use `getAttribute()` to sort them separately. — slash197, Mar 26 '12 at 07:56

score 1 · Accepted Answer · answered Mar 26 '12 at 07:54

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!

answered Mar 26 '12 at 07:54

Tats_innit

33,991
10
71
77

whether i have to add a jquery library for this? – bala3569 Mar 26 '12 at 09:08
Hiya, yep for JQuery to work you need to include Jquery in your code but nopes the solution above is purely in Jquery, no plugin required, cheers – Tats_innit Mar 26 '12 at 09:11
yep coz I reckon jsfiddle include basic JQuery for you, now jsfiddle works: http://stackoverflow.com/questions/5283257/how-does-jsfiddle-work CHeerios!! – Tats_innit Mar 26 '12 at 09:16
couldnt get ur point..whether i need to add jquery library for this.its not working for me and it is not working in the fiddle also – bala3569 Mar 26 '12 at 09:18
Lol Type i mean `how` & **Yes you need to add Jquery in your code**, for this to work, I thought you are asking something basic about jsfiddle, also further I was trying to be extra informative to point out that don't get confused with the plugin, but yes obviously you need Jquery, :) hope this helps, cheers! – Tats_innit Mar 26 '12 at 09:20
umm, sorry but, how do you mean it is not working in jsfiddle? cheers! – Tats_innit Mar 26 '12 at 09:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9308/discussion-between-bala3569-and-tats-innit) – bala3569 Mar 26 '12 at 09:26

Sorting columns inside a list alphabetically using jQuery?

1 Answers1