Click here to Skip to main content
15,908,931 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi,

I have a requirement where I have to sort the content of a html table based on value selected in dropdown.

The dropdown contain 2 values: Sort by Number and Sort By Description.
On selecting Sort By Number the table should be sorted by Number.
On selecting Sort By Description the table should be sorted by Description.
This I need to do using MVC and jquery.

Please help me out.

Thanks.



@{
Layout = T4MVC.SharedController.ViewNames._Ctx;
}

@section brandcrambs{

}
@Html.DropDownList("SortBy", new List<SelectListItem>
{
new SelectListItem{ Text="Sort By Number", Value="0", Selected=true},
new SelectListItem{ Text="Sort By Description", Value = "1" }
})
@{
var s = @ViewData["currentNode"];
}

@Convert.ToString(s)


@foreach (SubSectionNodesVM n in Model.Nodes)
{



@if (n.CurrentNode.Key.Contains("Specification"))
{
Html.RenderPartial(T4MVC.SharedController.ViewNames._PrintButtons, n.CurrentNode);
}


var matchValue = n.Nodes as IEnumerable<sitemapnodebase>;
var resultSet = from dtRow in matchValue.AsEnumerable()
group dtRow by dtRow.Prefix into newGroup
orderby newGroup.Key
select newGroup;
var datamodel = resultSet as IEnumerable<sitemapnodebase>;
var k = 0;





@foreach (var item in resultSet)
{
k++;
var match = item.Select(m => m.DefaultValue);

string resultDefaultValue = string.Empty;

if (match != null)
{
if (match.Count() > 0)
{
resultDefaultValue = match.ToList()[0];
}
}







var i = 0;
foreach (var inneritem in item)
{
k++;
@if (@inneritem.RangeStart == null || @inneritem.RangeStart == "")
{
}
else
{

}
@if (@inneritem.RangeEnd == null || @inneritem.RangeEnd == "")
{
}
else
{
}
}




}

@resultDefaultValue
@inneritem.NumberFrom: @inneritem.RangeStartTo: @inneritem.RangeEnd@inneritem.Description


<script>
$(document).ready(function () {
$('#SortBy').change(function () {
var value = $("#SortBy option:selected").val();
alert(value);
});
})

</script>
Posted
Updated 9-Jun-14 3:17am
v2
Comments
Stephen Hewison 3-Jun-14 7:29am    
What have you tried so far and what problems have you run into?
W Balboos, GHB 3-Jun-14 14:34pm    
After you get this working, you may wish to consider switching to a pair of RADIO BUTTONS for this type of input.
Ramug10 6-Jun-14 1:09am    
Show me your code I will assist you
Member 8191831 9-Jun-14 9:13am    
Hi Ramug10,
I have written the code below.

@{
Layout = T4MVC.SharedController.ViewNames._Ctx;
}

@section brandcrambs{
<div id="breadcrumbs">@{Html.RenderPartial(T4MVC.SharedController.ViewNames._ProductCatalogBrandCrambs, Model);}</div>
}
@Html.DropDownList("SortBy", new List<SelectListItem>
{
new SelectListItem{ Text="Sort By Number", Value="0", Selected=true},
new SelectListItem{ Text="Sort By Description", Value = "1" }
})
@{
var s = @ViewData["currentNode"];
}
<div style="font-size: 14px; font-weight: bold">
@Convert.ToString(s)
</div>

@foreach (SubSectionNodesVM n in Model.Nodes)
{



@if (n.CurrentNode.Key.Contains("Specification"))
{
Html.RenderPartial(T4MVC.SharedController.ViewNames._PrintButtons, n.CurrentNode);
}


var matchValue = n.Nodes as IEnumerable<sitemapnodebase>;
var resultSet = from dtRow in matchValue.AsEnumerable()
group dtRow by dtRow.Prefix into newGroup
orderby newGroup.Key
select newGroup;
var datamodel = resultSet as IEnumerable<sitemapnodebase>;
var k = 0;
<div id="@n.CurrentNode.Key.Replace("Specification|", "").Replace("Section|", "")" >

<table>


@foreach (var item in resultSet)
{
k++;
var match = item.Select(m => m.DefaultValue);

string resultDefaultValue = string.Empty;

if (match != null)
{
if (match.Count() > 0)
{
resultDefaultValue = match.ToList()[0];
}
}



<tr style="background-color:@(k % 2 == 1 ? "white" : "rgb(246,246,246)")">
<td colspan="4" style="font-size: 12px; font-weight: bold">@resultDefaultValue</td>



</tr>

var i = 0;
foreach (var inneritem in item)
{
k++;
<tr style="background-color:@(k % 2 == 1 ? "white" : "rgb(246,246,246)")">
<td style="width: 250px">@inneritem.Number</td>
@if (@inneritem.RangeStart == null || @inneritem.RangeStart == "")
{
<td style="width: 250px"></td>
}
else
{
<td style="width: 250px">From: @inneritem.RangeStart</td>
}
@if (@inneritem.RangeEnd == null || @inneritem.RangeEnd == "")
{
<td style="width: 250px"></td>
}
else
{
<td style="width: 250px">To: @inneritem.RangeEnd</td>
}
<td style="width: 800px">@inneritem.Description</td>
</tr>
}




}

</table>

<script>
$(document).ready(function () {
$('#SortBy').change(function () {
var value = $("#SortBy option:selected").val();
alert(value);
});
})

</script>

Thanks in advance.
Member 8191831 10-Jun-14 6:22am    
Can you pls assist me ?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900