JQuery BulletedList Control Sorting in ASP.NET using JQuery
This demonstration is about how sort the items of the BulletedList control using JQuery in Visual Studio 2010
Sorting is the most common tasks performed with tabular data. Here I will explain you how to sort the items of the BulletedList control.
In the following example you have to sort items given as staff member of a software company. The staff (items) will be sorted from higher post to lower post, lets quickly jump to the solution.
Design View
We have six staff members to be sort in descending order according to their post but we given a integer value to them in ascending order such as the "1" for Director and "2" for HR Manager etc., so the items will be sorted in ascending order according to the values.
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JQuery Sort Items</title>
<style type="text/css">
.smallDiv
{
background-color:White;
font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size:12px;
color:#000000;
width:510px;
margin-left:auto;
margin-right:auto;
padding:10px;
border:solid 1px #c6cfe1;
}
.style2
{
font-family: Verdana;
font-size: small;
font-weight: normal;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$=btnSort]").click(function (e) {
e.preventDefault();
var sortedList = $.makeArray($('.bullet li'))
.sort(function (o, n) {
return ($(o).text() < $(n).text()) ? -1 : 1;
});
$('.bullet').html(sortedList);
$(this).attr("disabled", "disabled");
});
});
</script>
</head>
<body bgcolor="#c5c5c5">
<form id="form1" runat="server">
<div class="smallDiv"
style="font-family: Verdana; font-size: small; background-color: #F8F8F8;">
<h2 class="style2"
style="border-style: groove; height: 34px; background-color: #EAD5D5;"><strong>
A Software Comapny Staff </strong></h2>
<asp:BulletedList ID="list" runat="server" class="bullet"
style="font-weight: 700">
<asp:ListItem Value="5">
Software Developer </asp:ListItem>
<asp:ListItem Value="2">
HR Manager</asp:ListItem>
<asp:ListItem Value="1">
Director</asp:ListItem>
<asp:ListItem Value="3">
Project Manager</asp:ListItem>
<asp:ListItem Value="4">
Senior Software Developer</asp:ListItem>
<asp:ListItem Value="6">
Trainee</asp:ListItem>
</asp:BulletedList>
<br />
<asp:Button ID="btnSort" runat="server"
Text="Click To Sort"
Font-Names="Verdana" Font-Size="X-Small" />
</div>
</form>
</body>
</html>
Output
Sorted List Output
It will be very useful.