473,324 Members | 2,239 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Sorting an HTML Table with javascript.

Hi,I am doing project in ASP.NET(by VB.NEt).I have created an HTML Table.Now I want to apply sorting to the table in javascript.How can I do this?Any help will be appreciated.Thanking you!
Feb 11 '08 #1
4 2169
Plater
7,872 Expert 4TB
This question would be much better answered in the javascript forum, since it no longer has anything to do with .NET

I will move it for you.

MODERATOR
Feb 11 '08 #2
mrhoo
428 256MB
I don't know how much help you need.
This example allows you to sort a table by clicking in the selected column's header cell. You can also use tab and space (or enter) in IE and Firefox, but more code is needed to make it accessible by keyboard in Opera.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html lang= "en">
  3. <head>
  4. <meta http-equiv= "Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML Table Sort </title>
  6. <!-- testing code; in use make the script and stylesheet remote files
  7.  
  8. -->
  9. <script type= "text/javascript" >
  10. function sortColumn(e){
  11.     /* the handler calls a sorting function on the targeted cells
  12.     */
  13.     var who= window.event ? event.srcElement : e.target;
  14.     var pa= who.parentNode;
  15.     var T= pa,txt;
  16.     while(T.nodeName != 'TABLE') T= T.parentNode;
  17.     var C= T.getElementsByTagName('caption')[0];
  18.     if(C)txt= who.title.replace('Sort','Sorted');
  19.     T= T.getElementsByTagName('tbody')[0];
  20.     var A= pa.getElementsByTagName("th");
  21.     var L= A.length, count= 0;
  22.     while (A[count] != who) ++count;
  23.     do_colSort(count,T);
  24.     if(txt)C.firstChild.nodeValue= txt;
  25. }
  26.  
  27. function do_colSort(count,T){
  28.     /* the sorting method (alphabetical or by price)
  29.     is determined by the contents of the first td in the column
  30.     You could use class namesto filter the sort in a more complex table
  31.     */
  32.     var R= T.getElementsByTagName("tr");
  33.     var L= R.length,RA= [], A= [], tem, funS;
  34.     for (var i= 0; i < L; i++){
  35.         RA[i]= R[i];
  36.         tem= R[i].getElementsByTagName("td")[count];
  37.         A[i]= [i,tem.firstChild.nodeValue];
  38.     }
  39.     if(/\$/.test(A[0][1])){
  40.         funS= function(a, b){
  41.             a= parseFloat(a[1].replace(/\D+/g, ""));
  42.             b= parseFloat(b[1].replace(/\D+/g, ""));
  43.             return a - b;
  44.         }
  45.     }
  46.     else{
  47.         funS= function(a, b){
  48.             a= a[1].toLowerCase();
  49.             b= b[1].toLowerCase();
  50.             if (a== b) return 0;
  51.             if (a > b) return 1;
  52.             return -1;
  53.         }
  54.     }
  55.     A.sort(funS);
  56.     for (var i= 0; i < L; i++){
  57.         tem= A[i][0];
  58.         T.appendChild(RA[tem]);
  59.     }
  60. }
  61.  
  62. onload= function(){
  63.     /* assign event handlers to the thead cells,
  64.      if it has a class name including 'sortable'
  65.     */
  66.     if(document.createTextNode){
  67.         var t= document.getElementsByTagName('thead')[0];
  68.         if(t.className.indexOf('sortable')==-1) return;
  69.         t= t.getElementsByTagName('th');
  70.         var L= t.length,who;
  71.         for(var i= 0;i<L;i++){
  72.             who= t[i];
  73.             if(who.className && /nosort/i.test(who.className)) continue;
  74.             who.onclick= sortColumn;
  75.             who.onmouseover= who.onfocus= function(e){
  76.                 e= window.event?event.srcElement:e.target;
  77.                 e.style.color= 'red'
  78.             };
  79.             who.onmouseout= who.onblur= function(e){
  80.                 e= window.event?event.srcElement:e.target;
  81.                 e.style.color= ''
  82.             };
  83.             who.title= 'Sort by '+who.firstChild.nodeValue;
  84.             who.tabIndex= 1;
  85.             who.onkeypress= who.onclick;
  86.         }
  87.         var C= document.getElementsByTagName('caption')[0];
  88.         if(C)C.firstChild.nodeValue= 'Sort by column';
  89.     }
  90. }
  91.  
  92. </script>
  93. <style type= "text/css">
  94. body{font-size:120%;margin:1ex 1em;color:black;background:white;font-family:"Times New Roman", serif}
  95. table{border:ridge black 3px;background-color:white;font-size:1.1em;width:50%}
  96. td,th{border:solid black 1px;padding:2px;width:33%}
  97. .sortableClass    th{cursor:pointer}
  98. thead,tfoot{background-color:#eee;font-size:1.1em;font-weight:bold;text-align:center}
  99. caption{font-weight:bold}
  100. </style>
  101. </head>
  102. <body>
  103. <h1 id= "firstH1" style="margin-top:2em">HTML Elements</h1>
  104. <h2>Sorting Table Elements</h2>
  105. <div>
  106. <table>
  107. <caption>Three Column Table</caption>
  108. <thead class= "sortableClass">
  109. <tr>
  110. <th>Make</th>
  111. <th>Model</th>
  112. <th>Price</th>
  113. </tr>
  114. </thead>
  115. <tbody>
  116. <tr>
  117. <td>Ford</td><td>Truck</td><td>$23,000</td>
  118. </tr>
  119. <tr>
  120. <td>Subaru</td><td>Wagon</td><td>$21,000</td>
  121. </tr>
  122. <tr>
  123. <td>Kia</td><td>Compact</td><td>$13,000</td>
  124. </tr>
  125. <tr>
  126. <td>Lexus</td><td>Sedan</td><td>$35,000</td>
  127. </tr>
  128. <tr>
  129. <td>Honda</td><td>SUV</td><td>$26,000</td>
  130. </tr>
  131. </tbody>
  132. </table>
  133. </div>
  134. </body>
  135. </html>
Feb 11 '08 #3
Hi,I am doing project in ASP.NET(by VB.NEt).I have created an HTML Table.Now I want to apply sorting to the table in javascript.How can I do this?Any help will be appreciated.Thanking you!
Feb 12 '08 #4
acoder
16,027 Expert Mod 8TB
Your thread had already been moved to the JavaScript forum and answered. I've merged the threads.

Moderator.
Feb 12 '08 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Tim | last post by:
I've been working on this for over a week now, and just can't get this figured out. Hoping one of you gurus can help me out here. I have an xml data island that I'm representing on an htm page as...
4
by: John Bullock | last post by:
Hello, I am at wit's end with an array sorting problem. I have a simple table-sorting function which must, at times, sort on columns that include entries with nothing but a space (@nbsp;). I...
4
by: Gareth Gale | last post by:
I'm trying to implement a way of allowing a user to sort a HTML table via Javascript on the client. I've seen lots of samples where single column sorting (asc or desc) is shown, but I'd like nested...
22
by: mike | last post by:
If I had a date in the format "01-Jan-05" it does not sort properly with my sort routine: function compareDate(a,b) { var date_a = new Date(a); var date_b = new Date(b); if (date_a < date_b)...
2
by: jab3 | last post by:
Hello - I'm trying to implement a table that will allow the user to sort on each column, like many applicaitons that have tabular data (e-mail, song list, etc). It invovles grabbing the table,...
1
by: jmdolinger | last post by:
Hi all, I'm a newbie to Atlas (and recently ASP.NET) after coming from a long Java background, also have done quite a bit with an Ajax.NET/ASP.NET 1.1 project, but it was basically all...
6
by: bcochofel | last post by:
I'm using xsl to list an xml file that contains something like: sites, tag and weight. I'm listing this in a table with the following titles: | URL | TAG | WEIGHT (each title his a link) What...
7
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...
1
by: dorandoran | last post by:
The sort on the childgrid is not working; nothing happens when I click on the each column header for sort. (I followed Satay's sample: http://www.codeproject.com/KB/aspnet/EditNestedGridView.aspx)...
5
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.