Table Sorter In MVC Shown Below
In Model
In Model
public class Sample
{
public string UserName { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Location { get; set; }
public string Name { get; set; }
public string Path { get; set; }
public string Size { get; set; }
public List<Sample> images { get; set; }
public int Id{get;set;}
public List<Sample> Listgrid { get; set; }
KavithaEntities1 context = new KavithaEntities1();
public List<Sample> GetList()
{
List<Sample> ListDetails = new List<Sample>();
Sample Smpl = null;
var list = context.sp_GetList_Jqgrid().ToList();
for (int i = 0; i < list.Count(); i++)
{
Smpl = new Sample();
Smpl.UserName =
list[i].UserName;
Smpl.FirstName =
list[i].FirstName;
Smpl.LastName =
list[i].LastName;
Smpl.Location =
list[i].Location;
Smpl.Id = Convert.ToInt32(list[i].Id);
ListDetails.Add(Smpl);
}
return ListDetails;
}
}
In Controller
public ActionResult TableSorter()
{
Sample sample = new Sample();
List<Sample> lst = new List<Sample>();
lst = sample.GetList();
return View(lst);
}
IN View
@model
IEnumerable<JQGridExample.Models.Sample>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<link href="~/Content/css/login.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="@Url.Content("~/Content/js/jquery.tablesorter-2.0.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/jquery.tablesorter.filer.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Content/js/jquery.tablesorter.pager.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#yui tbody tr").length > 0) {
$("#yui").tablesorter({ textExtraction: "complex", debug:
false, widgets: ['zebra'], headers: { 0: {
sorter: false } } })
.tablesorterPager({ container:
$("#pagerOne"), positionFixed: false, size: 10 })
.tablesorterFilter({
filterContainer: $("#filterBox"),
filterClearContainer: $("#filterClear"),
filterColumns: [1,
2],
filterCaseSensitive: false
});
}
});
function checkAll(checkedStatus) {
$("input[class='chkuserid']").each(function () {
this.checked = checkedStatus;
});
}
function CheckboxCheck() {
var chkarray = [];
$('.chkuserid:checkbox:checked').each(function () {
$('#chkall').attr('checked', false);
chkarray.push($(this).val());
});
var totalCheckboxes = $('input:checkbox').length;
var checkedCheckboxes = $('input:checkbox:checked').length;
if (totalCheckboxes - 1 == checkedCheckboxes) {
$('#chkall').attr('checked', true);
}
}
</script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TableSorter</title>
</head>
<body>
<div class="tableGrid">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="yui">
<thead>
<tr>
<td colspan="5" style="background: #5e5c5c; color: #fff; vertical-align: middle; font-size: 12px; font-weight: bold">Search
on Function Id / Description</td>
</tr>
<tr>
<td colspan="5" class="filter">
<div style="float: left; height: 28px;">
<input name="filter" id="filterBox" value="" maxlength="30" size="30" type="text" class="membertextbox" />
<input type="button" name="button" id="filterClear" value="View All" class="redbutton">
<input type="button" name="button" id="btndel" value="Delete" class="redbutton" onclick="return DeleteFunction()">
</div>
<div style="float: right">
</div>
</td>
</tr>
<tr>
<th width="5%" style="background: #5e5c5c; color: #fff; vertical-align: middle; font-size: 12px; font-weight: bold">
<input type="checkbox" id="chkall" onclick="return
checkAll(this.checked)" />
</th>
<th style="text-decoration: underline; cursor: pointer">User Name</th>
<th style="text-decoration: underline; cursor: pointer">First Name</th>
<th style="text-decoration: underline; cursor: pointer">Last Name</th>
<th style="text-decoration: underline; cursor: pointer">Location</th>
</tr>
</thead>
@if (Model != null && Model.Count()
> 0)
{
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" value="@item.Id" name="chkfunction" class="chkuserid" onclick="CheckboxCheck()"/>
</td>
<td>
@Html.ActionLink(item.UserName, "EditFunction", new { FID = item.Id }, new { @style = "color:#000;text-decoration:underline" })
</td>
<td>@Html.DisplayFor(modelItem => item.FirstName)</td>
<td>@Html.DisplayFor(modelItem => item.LastName)</td>
<td>@Html.DisplayFor(modelItem => item.Location)</td>
</tr>
}
</tbody>
<tfoot>
<tr id="pagerOne" style="background-color: #E1ECF9">
<td align="center" style="font-size: 9pt; text-align: center" colspan="5">
<img src="@Url.Content("~/Content/images/first.png")" class="first" style="vertical-align:middle" />
<img src="@Url.Content("~/Content/images/prev.png")" class="prev" style="vertical-align:middle" />
<input type="text" class="pagedisplay" style="width: 34px; text-align: center;" readonly="readonly" />
<img src="@Url.Content("~/Content/images/next1.png")" class="next" style="vertical-align:middle" />
<img src="@Url.Content("~/Content/images/last.png")" class="last" style="vertical-align:middle" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="50">5</option>
<option value="100">10</option>
<option value="150">15</option>
<option value="200">20</option>
</select><span style="color: #000; font-weight: normal"> Records per page</span>
</td>
</tr>
</tfoot>
}
</table>
</div>
</body>
</html>
No comments:
Post a Comment