In my previous article I discussed about JQuery DataTable Paging, Searching and Sorting In ASP.NET and FXCop Static Code Analysis For ASP.NET Preventive Action and Scheduled Tasks In ASP.NET With Quartz.Net
In my previous article JQuery DataTable Paging, Searching and Sorting in ASP.NET I have discussed how to bind static JSON data to JQuery DataTable including paging, searching, sorting etc. In this article I will discuss how to create dynamic JSON data from controller and bind server side data to JQuery DataTable. I will also cover paging, sorting, searching operation using JQuery DataTable.
To know more about JQuery DataTable please refer my previous article .
So let's open Visual Studio and start creating new empty ASP.NET MVC5 application. In this article I am using Visual Studio Express 2013 for Web but you can use Visual Studio 2013 as well.
Now start creating ASP.NET Web project in Visual Studio 2013.
using JQueryDataTableMVC.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace JQueryDataTableMVC.Controllers
{
public class EmployeeController : Controller
{
JQueryDataTableDBContext db = new JQueryDataTableDBContext();
public ActionResult Index()
{
return View();
}
//Employee/getEmployees
[HttpGet]
public JsonResult getEmployees()
{
var jsonData = new
{
data = from emp in db.Employees.ToList() select emp
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}
}
<script src="Scripts/jquery-1.11.3.min.js"></script>
<script src="Scripts/jquery.dataTables.js"></script>
<link href="css/jquery.dataTables.min.css" rel="stylesheet" />
<div style="width:300;">
<script type="text/javascript">
$(document).ready(function () {
$('#tblEmployee').DataTable({
"searching": true,
"ordering": true,
"pagingType": "full_numbers",
"ajax": "https://localhost:58793/Employee/getEmployees",
"columns": [
{ "data": "Name" },
{ "data": "Designation" },
{ "data": "Gender" },
{ "data": "Salary" },
{ "data": "City" },
{ "data": "State" },
{ "data": "Zip" }
]
});
});
</script>
</div>
<table id="tblEmployee" class="display" cellspacing="0" data-page-length='5'>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
</tr>
</thead>
</table>
I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...