من توصیه به استفاده ازویژگی "Data-Source"   جدول به عنوان شناسایی برای محلی که اطلاعات در سمت سروراست.

<table id="grid" data-source="@Url.Action("GetPlayers")"></table>  

سپس، ما نیاز به مقداردهی اولیه جدول به عنوان یک گرید با فیلد هایی که قصد نمایش آها را داریم:

      grid = $("#grid").grid({
                dataKey: "ID",
                uiLibrary: "bootstrap",
                columns: [
                    { field: "ID",title:"ردیف", width: 50, sortable: true },
                    { field: "Name",title:"نام", sortable: true },
                    { field: "PlaceOfBirth", title: "محل تولد", sortable: true },
                    { field: "DateOfBirth", title: "تاریخ تولد", sortable: true },
                    { title: "ویرایش", field: "Edit", width: 45, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } },
                    { title: "حذف", field: "Delete", width: 45, type: "icon", icon: "glyphicon-remove", tooltip: "Delete", events: { "click": Remove } }
                ],
                pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
            });

اگر می خواهید قادر به مرتب سازی بر اساس یک ستون خاص باشد شما نیاز به تنظیم  گزینه  مرتب شدن (Sortable) از آن ستون به به مقدار True

زمانی که شما میخواهید این کار را انجام دهید پلاگین گرید اطلاعات را به سرور میفرستد درباره نام فیلدی که نیاز است بر اساس آن مرتب سازی شود.

به منظور پیکر بندی صفحه بندی شما نیاز به استفاده از گزینه Pager از جایی که شما می توانید صفحه بندی را کنترل کنید.

در این مثال از کد زیر برای انجام عملیات حذف ، اضافه و ویرایش داده ها درون گرید.

function Add() {  
    $("#playerId").val("");  
    $("#name").val("");  
    $("#placeOfBirth").val("");  
    $("#dateOfBirth").val("");  
    $("#playerModal").modal("show");  
  }  
  function Edit(e) {  
    $("#playerId").val(e.data.id);  
    $("#name").val(e.data.record.Name);  
    $("#placeOfBirth").val(e.data.record.PlaceOfBirth);  
    $("#dateOfBirth").val(e.data.record.DateOfBirth);  
    $("#playerModal").modal("show");  
  }  
  function Save() {  
    var player = {  
      ID: $("#playerId").val(),  
      Name: $("#name").val(),  
      PlaceOfBirth: $("#placeOfBirth").val(),  
      DateOfBirth: $("#dateOfBirth").val()  
    };  
    $.ajax({ url: "Home/Save", type: "POST", data: { player: player } })  
      .done(function () {  
        grid.reload();  
        $("#playerModal").modal("hide");  
      })  
      .fail(function () {  
        alert("Unable to save.");  
        $("#playerModal").modal("hide");  
      });  
  }  
  function Remove(e) {  
    $.ajax({ url: "Home/Remove", type: "POST", data: { id: e.data.id } })  
      .done(function () {  
        grid.reload();  
      })  
      .fail(function () {  
        alert("Unable to remove.");  
      });  
  }  
  function Search() {  
    grid.reload({ searchString: $("#search").val() });  
  }  

در سمت سرور که کنترلر ما می باشد  باید چهار متد Index ، GetPlayers ، Save و Remove :

[NoCache]  
  public class HomeController : Controller  
  {  
    public ActionResult Index()  
    {  
      return View();  
    }  
  
    [HttpGet]  
    public JsonResult GetPlayers(int? page, int? limit, string sortBy, string direction, string searchString = null)  
    {  
      int total;  
      var records = new GridModel().GetPlayers(page, limit, sortBy, direction, searchString, out total);  
      return Json(new { records, total }, JsonRequestBehavior.AllowGet);  
    }  
  
    [HttpPost]  
    public JsonResult Save(Player player)  
    {  
      new GridModel().Save(player);  
      return Json(true);  
    }  
  
    [HttpPost]  
    public JsonResult Remove(int id)  
    {  
      new GridModel().Remove(id);  
      return Json(true);  
    }  
  }  

نکته : من از یک صفت سفارشی [NoCache] برای رفع برخی مشکلات caching  استفاده کردم.

توصیه من استفاده از این ویژگی یا یک مکانیسم مشابه برای پیشگیری از اشکالات مربوط به cashing :

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]  
  public sealed class NoCacheAttribute : ActionFilterAttribute  
  {  
    public override void OnResultExecuting(ResultExecutingContext filterContext)  
    {  
      filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));  
      filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);  
      filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);  
      filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);  
      filterContext.HttpContext.Response.Cache.SetNoStore();  
      base.OnResultExecuting(filterContext);  
    }  
  }  

در این مثال مدل داده  را از یک فایل xml استفاده کردم شما میتوانید از هر مدل داده استفاده کنید.: