Column Name Data Type Max Length
CustID int NULL
CompName nvarchar 50
ContactName nvarchar 50
Address nvarchar 50
City nvarchar 50
PostalCode nvarchar 50
Country nvarchar 50
Phone nvarchar 50Home Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCDATATABLE.Controllers;
namespace MVCDATATABLE.Controllers
{
public class HomeController: Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult LoadData()
{
using(CustomerDBContext dc = new CustomerDBContext())
{
var data = dc.Tbl_Customer.OrderBy(a => a.ContactName)
.ToList();
return Json(new
{
data = data
}, JsonRequestBehavior.AllowGet);
}
}
}
} \\ Jquery Gridview code
for index.cshtml
@
{
ViewBag.Title = "Index";
} < h2 > < marquee behavior = "scroll"
direction = "left" > < b > Customer Record < /b></marquee > < /h2> < div style = "width: 92%; margin: 0 auto;" > < table id = "myTable" > < thead > < tr > < th > Company name < /th> < th > Customer name < /th> < th > Address < /th> < th > City < /th> < th > Postal Code < /th> < th > Country < /th> < th > Contact No. < /th> < /tr> < /thead> < /table> < /div> < style > tr.even
{
background - color: #88cc00 !important;
}
</style>
<link href= "//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"
rel = "stylesheet" / > @section Scripts
{ < script src = "//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" > < /script> < script > $(document)
.ready(function ()
{
$('#myTable')
.DataTable(
{
"ajax":
{
"url": "/Home/LoadData",
"type": "Get",
"datatype": "json"
},
"columns": [
{
"data": "CompName",
"autowidth": true
},
{
"data": "ContactName",
"autowidth": true
},
{
"data": "Address",
"autowidth": true
},
{
"data": "City",
"autowidth": true
},
{
"data": "PostalCode",
"autowidth": true
},
{
"data": "Country",
"autowidth": true
},
{
"data": "Phone",
"autowidth": true
}]
});
}); < /script>
}