Question

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!

Answer 1

You miss one line in your script. Append this to your script, to make the last lines look like this:

       caption: 'Device list'
    }).navGrid("#pager, { add: false, edit: false, del: false }

See http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator for all the details of this function.