How to Sort Elements in Array using JQuery

No.of Views5479
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  11 Jan 2011 10:01:41
Tag : JQuery , How to
The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.

Implementation

Let’s create simple web application and add JQuery library within page under header section as like below,

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">  
</script>

And then add JavaScript code to sort elements within Array using JQuery.

How to Sort String Element?

1.    Ascending Order

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to sort Elements in Array Using JQuery</title>

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">  
    </script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            var elements = ["RRaveen", "John", "Jana", "Abhji", "Dhan"];
            $("#main1").html(elements.join("<br/>"));
            elements = elements.sort();           
            $("#main1").append("<p>Sorted Elements</p>");
            $("#main2").html(elements.join("<br/>"));
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="main1">
    </div>
    <div id="main2">
    </div>
    </form>
</body>
</html>

Output 

Image Loading

2.    Descending Order

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to sort Elements in Array Using JQuery</title>

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">  
    </script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            var elements = ["RRaveen", "John", "Jana", "Abhji", "Dhan"];
            $("#main1").html(elements.join("<br/>"));
            elements = elements.sort();
            elements = elements.reverse();
            $("#main1").append("<p>Sorted Elements in Descending Order</p>");
            $("#main2").html(elements.join("<br/>"));
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="main1">
    </div>
    <div id="main2">
    </div>
    </form>
</body>
</html>

Output

Image Loading

How to Sort Numeric Elements?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to sort Elements in Array Using JQuery</title>

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">  
    </script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {          
            var elements = [23, 13, 100, 187, 34, 98];
            $("#main1").html(elements.join("<br/>"));
            elements = elements.sort(function(a, b) {
                return a - b;
            });

            $("#main1").append("<p>Sorted numeric Elements</p>");
            $("#main2").html(elements.join("<br/>"));
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="main1">
    </div>
    <div id="main2">
    </div>
    </form>
</body>
</html>

Output 

Image Loading

That's cool and easy way to sort elements in client side.

Live Demo

sort elements in array

Conclusion

In this article, you have learned how sort to elements within array by ascending and descending order for string and numeric types. Hopes help and thank you for reading.

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
    The JQuery is powerful client side JavaScript library. Today I’m going to show you how to create cascading DropDownList using JQuery with JSON in ASP.NET.I hope you are all heard about cascading DropDownList and how to use with AJAX tool kit
    Published Date : 07/Dec/2010
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    Today I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery on time. The character counter is support to users to display how many characters have entered and how many chars remaining in live.
    Published Date : 25/Dec/2010
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</