How to enable navigation buttons of jQuery grid in mvc3 and assign buttons to specific links?

I have read some topic regarding with my question but there code doesn't work for me. Honestly, I'm not good in jQuery.

I have this working views and controller, but it has a lot disadvantages that is why I switch to using jQuery grid.

Working code (not using jQuery grid):

@using Custom.Helpers

@model IEnumerable<Models.DeviceMVC>



@{

    ViewBag.Title = "List";

}



<div id="page-title">

<h2>Device list</h2>

    <div id="Optiontab">

        @Html.ActionLink("Create New", "Create")

    </div>

</div>

<table id="table-list">

    <tr>

        <th>

            Branch

        </th>

        <th>

            Name

        </th>

        <th>

            Login id

        </th>

        <th>

            Serial number

        </th>

        <th>

            Brand

        </th>

        <th>

            Model

        </th>

        <th></th>

    </tr>



@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.BranchName)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.LoginID)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.SerialNum)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Brand)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Model)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id = item.DeviceID, branch = item.BranchName }) |

            @Html.ActionLink("Details", "Details", new { id=item.DeviceID })

        </td>

    </tr>

}

</table>

To resolve the link in side areas, I use this helper:


Helper

To load data:

public ActionResult Index()

{

    IDeviceComponentMVC mvc = new DeviceComponentMVC();

    return View(mvc.RetrieveAllDevices());

}

Now in jQuery (View part):

<script type="text/javascript">

    jQuery(document).ready(function () {

        jQuery("#list").jqGrid({

            url: '@Url.Content("~/Device/LoadDevice")',

            datatype: 'json',

            mtype: 'POST',

            colNames: ['Branch', 'Name', 'Username', 'Serial', 'Brand', 'Model'],

            colModel: [

          { name: 'Branch', index: 'Branch', width: 136, align: 'Branch', sortable: false },

          { name: 'Name', index: 'Name', width: 136, align: 'Name' },

          { name: 'LoginID', index: 'LoginID', width: 136, align: 'LoginID' },

          { name: 'SerialNum', index: 'SerialNum', width: 100, align: 'SerialNum' },

          { name: 'Brand', index: 'Brand', width: 136, align: 'Brand' },

          { name: 'Model', index: 'Model', width: 136, align: 'Model' }

          ],

            pager: jQuery('#pager'),

            rowNum: 5,

            rowList: [10, 50, 100, 150, 250, 300, 350, 400, 500],

            sortname: 'Name',

            sortorder: "desc",

            viewrecords: true,

            imgpath: '',

            caption: 'Device list'

        })

    });



</script>  

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

<div id="pager" class="scroll" style="text-align:center; padding:50px;"></div>

Controller part:

public JsonResult LoadDevice(string sidx, string sord, int page, int rows)

{

    using (DBase db = new DBase())

    {

        var context = db;

        int pageIndex = Convert.ToInt32(page) - 1;

        int pageSize = rows;

        int totalRecords = context.devices.Count();

        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);



        var devices = context.devices.OrderBy("it." + sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);



        var sorted = (from item in devices

                      select new

                      {

                          i = item.DeviceID,

                          cell = new List<string> { item.branch.Name, item.Name, item.LoginID, item.SerialNum, item.Brand, item.Model }

                      }).ToArray();



        var jsonData = new

        {

            total = totalPages,

            page,

            records = totalRecords,

            rows = sorted

        };

        return Json(jsonData);

    }

}

Now my very goal is to put navigation buttons like this:

But these button should have specific link. The link like what my first view (without jQuery grid) does have.

Currently I have:

Hope someone could help. Thanks a lot!