MVC - paging and sorting - asp.net-mvc

Question

I am attempting to implement paging and sorting into my Index view. I am following the example at http://www.codeguru.com/csharp/.net/net_asp/mvc/implementing-sorting-and-paging-in-asp.net-mvc.html however my work is neither paging or sorting. I am not sure where I went wrong.
My Index view is passed a parameter when accessed so I did modify it a little however it should not have cause it to do nothing.
My PagingInfo viewModel used for the paging and sorting is as followings.
public class PagingInfo
{
public string SortField { get; set; }
public string SortDirection { get; set; }
public int PageSize { get; set; }
public int PageCount { get; set; }
public int CurrentPageIndex { get; set; }
}
My controller has
public ActionResult Index(int id)
{
DeviceLogIndex vm = new DeviceLogIndex();
var devicelogs = db.DeviceLogs
.Include(d => d.Device)
.Include(d => d.DeviceLogType)
.Include(d => d.Device.ManufacturerModel)
.Where(d => d.DeviceID == id);
{
PagingInfo info = new PagingInfo();
info.SortField = "DeviceLog";
info.SortDirection = "ascending";
info.PageSize = 4;
info.PageCount = Convert.ToInt32(Math.Ceiling((double)(db.DeviceLogs.Count()/info.PageSize)));
// info.PageCount +=1;
info.CurrentPageIndex = 0;
var query = devicelogs.OrderBy(c => c.DeviceLogID).Take(info.PageSize);
ViewBag.PagingInfo = info;
vm.DeviceLogs = query.ToList();
Device model = db.Devices.Find(id);
model.DeviceID= id;
vm.MyDeviceID = id;
return View(vm);
}
}
[HttpPost]
public ActionResult Index(PagingInfo info, int id)
{
DeviceLogIndex vm = new DeviceLogIndex();
var devicelogs = db.DeviceLogs
.Include(d => d.Device)
.Include(d => d.DeviceLogType)
.Include(d => d.Device.ManufacturerModel)
.Where(d => d.DeviceID == id);
{
IQueryable<DeviceLog> query = null;
switch (info.SortField)
{
case "EntryDate":
query = (info.SortDirection == "ascending" ?
devicelogs.OrderBy(c => c.EntryDate) :
devicelogs.OrderByDescending(c => c.EntryDate));
break;
case "LogType":
query = (info.SortDirection == "ascending" ?
devicelogs.OrderBy(c => c.DeviceLogType) :
devicelogs.OrderByDescending(c => c.DeviceLogType));
break;
}
query = query.Skip(info.CurrentPageIndex * info.PageSize).Take(info.PageSize);
ViewBag.PagingInfo = info;
vm.MyDeviceID = id;
vm.DeviceLogs = query.ToList();
return View(vm);
}
}
And my View contains these parts
#model AQB_MON.ViewModels.DeviceLogIndex
<script>
$(document).ready(function () {
$(".header").click(function (evt) {
var sortfield = $(evt.target).data("sortfield");
if ($("#SortField").val() == sortfield) {
if ($("#SortDirection").val() == "ascending") {
$("#SortDirection").val("descending");
}
else {
$("#SortDirection").val("ascending");
}
}
else {
$("#SortField").val(sortfield);
$("#SortDirection").val("ascending");
}
evt.preventDefault();
$("form").submit();
});
$(".pager").click(function (evt) {
var pageindex = $(evt.target).data("pageindex");
$("#CurrentPageIndex").val(pageindex);
evt.preventDefault();
$("form").submit();
});
});
</script>
#{
ViewBag.Title = "Index";
}
#{
AQB_MON.ViewModels.PagingInfo info = ViewBag.PagingInfo;
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create", new { id = Model.MyDeviceID})
</p>
#using (Html.BeginForm("Index", "DeviceLog", FormMethod.Get))
{
#Html.Hidden("SortField", info.SortField)
#Html.Hidden("SortDirection", info.SortDirection)
#Html.Hidden("PageCount", info.PageCount)
#Html.Hidden("PageSize", info.PageSize)
#Html.Hidden("CurrentPageIndex", info.CurrentPageIndex)
to set the Headers that are sortable -
<th>
<a href="#" data-sortfield="LogType"
class="header">Device Log Type</a>
</th>
<th>
<a href="#" data-sortfield="EntryDate"
class="header">Entry Date</a>
</th>
for the paging -
<td>
#for (var i = 0; i < info.PageCount; i++)
{
if (i == info.CurrentPageIndex)
{
<span>#(i + 1)</span>
}
else
{
<a href="#" data-pageindex="#i"
class="pager">#(i + 1)</a>
}
}
</td>
It's a lot of code that does not seem to do anything. Just confused.