Thursday 4 February 2016
Use Jquery Datatable Implement Pagination,Searching and Sorting by Server Side Code in ASP.NET MVC with Entity Framework
jQuery
,
MVC 3
,
MVC 4
1 comment
:
Here I will explain about Implement Jquery DataTable in
ASP.Net MVC 4 with search, sort and pagination also by use of server side code.
To implement jquery datatable in your project like asp.net or mvc 4 or mvc5 or
mvc6 any one just you need to add one script and one css file for basic
implementation.
To implement jquery datatable with server side code we need
to add one name space from NuGet packages
System.Linq.Dynamic
Visual Studio > New Project > ASP.NET MVC 4 Web
Application > Enter name of your project > Ok > Choose Internet
Application > Razor View
Add Entity Data Model:
Solution Explorer > Right Click on Name of your project
> Add New Item > Data > ADO.NET Entity Data Model > give model name
> Choose New Connection > Enter your id and password Choose Right
Connection > Choose you database > Choose tables > Enter model name
space > Finish
After creating my model class as
using System;
using System.Collections.Generic;
public partial class BookDetail
{
public int BookId { get; set; }
public string BookName { get; set; }
public string Author { get; set; }
public string Publisher { get; set; }
public decimal Price { get; set; }
}
Create a New Controller :
Solution Explorer > Right Click on Controllers > Add
Controller > Give name to controller > Choose Empty MVC Controller >
Add
Write the below code
public ActionResult Index()
{
return View();
}
Add View right click on Index and Choose view > Give name >
Choose view engine Razor > Add
@{
ViewBag.Title = "Index";
}
<h2>1.Implement Jquery Datatable in ASP.NET MVC</h2>
<div style="width: 90%; margin: 0 auto">
<table id="BookDetails">
<thead>
<tr>
<th>Book Id</th>
<th>Book Name</th>
<th>Author</th>
<th>Publisher</th>
<th>Price</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: green !important;
}
</style>
@* Load datatable css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* Load datatable js *@
@section
Scripts{
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#BookDetails').DataTable({
"processing": true,//To Show Progress Bar
"serverSide": true,//To process from server side
"filter": true,//To Enabling filter option
"orderMulti": false,//To disable multiple column at once
"ajax": {
"url": "/Book/loadDatausingServerSide",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "BookId","name":"BookId", "autoWidth": true },
{ "data": "BookName", "name": "BookName", "autoWidth": true },
{ "data": "Author", "name": "Author", "autoWidth": true },
{ "data": "Publisher", "name": "Publisher", "autoWidth": true },
{ "data": "Price", "name": "Price", "autoWidth": true }
]
}); });
</script>
}
Open your newly created controller page add below code
[HttpPost]
public ActionResult loadDatausingServerSide()
{
var draw = Request.Form.GetValues("draw").FirstOrDefault();
var start = Request.Form.GetValues("start").FirstOrDefault();
var length = Request.Form.GetValues("length").FirstOrDefault();
//To
find column order
var sortcolumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
var sortcolumndirectory = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
int pagesize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int totalrecords = 0;
using (Book_DBEntities be = new Book_DBEntities())
{
var bookdetails = (from a in be.BookDetails select a);
//Sort
if (!string.IsNullOrEmpty(sortcolumn) && !string.IsNullOrEmpty(sortcolumndirectory))
{
bookdetails = bookdetails.OrderBy(sortcolumn + " " + sortcolumndirectory); //If you get an error please add System.Linq.Dynamic name
space
}
totalrecords = bookdetails.Count();
var data = bookdetails.Skip(skip).Take(pagesize).ToList();
return Json(new {draw=draw,recordsFiltered=totalrecords,recordsTotal=totalrecords,data=data},JsonRequestBehavior.AllowGet);
}
}
Subscribe to:
Post Comments
(
Atom
)
Use Jquery Datatable Implement Pagination,Searching And Sorting By Server Side Code In Asp.Net Mvc With Entity Framework >>>>> Download Now
ReplyDelete>>>>> Download Full
Use Jquery Datatable Implement Pagination,Searching And Sorting By Server Side Code In Asp.Net Mvc With Entity Framework >>>>> Download LINK
>>>>> Download Now
Use Jquery Datatable Implement Pagination,Searching And Sorting By Server Side Code In Asp.Net Mvc With Entity Framework >>>>> Download Full
>>>>> Download LINK