Implementing Jquery Datatable in ASP.NET MVC 5

Datetime:2016-08-23 04:40:11          Topic: jQuery  ASP.NET MVC           Share

Hi every one in this tutorial i am going to explain about Implementing Jquery Datatable in MVC5 web application.Jquery Datatable is a plugin for implementing grid tables.You can find more data about this plugin here www.datatables.net .It is official site for Jquery datatables plugins.

Why we go for Jquery Datatable

I explained about some other grids in this site like,

Jqgrid(Ajax enabled grid)

Kendo Grid(it is a licensed version).

Angular Grid

I have already explained how to implement and integrate these grids in our ASP.NET MVC application.Though these are good to implement but,The implementation is a little bit complex.I worked on this above grids in my projects.But,when i saw this plugin it is very very easy to implement and there is complexity to learn.It is feature rich contains very less parameters and high functionality(No need to implement seach,filter they comes by default.But in previous grid we need to specify some options or parameter to implement).

And we can customize the theme of the grid very easily using ThemeForest , ThemeCreator ,Bootstrap also.

The below image is the screen shot of final output of this post.

In this tutorial i am going to fetch the table data from database and display it in Datatable.

Implementing Jquery DataTable

Step1 : Create an Application

1.Open Visual studio 2015 (Recommend) or Visual Studio 2013.

2.Create New web application using Empty MVC Template.

3.Add a Database to the solution.

Right click App_Data folder --> Add --> New Item --> Select SQL server database under Data --> Name the database -->Add.

Step2 : Create a table

1.Open Database in Server Explorer --> open Table --> right click on Tables --> Add New table --> give columns --> Click on Update button --> Click Update Database in Preview Database window popup.  

  2.I added table with below columns..

Step 3 :Add ADO.NET Entity Data Model

1.Go to Solution Explorer -->Right Click on Project name form Solution Explorer --> Add --> New item --> Select ADO.net Entity Data Model under data --> Enter model name --> Add.

2.A popup window will come (Entity Data Model Wizard) --> Select Generate from database -->click Next

3.Chose your data connection --> select your database -->Select Entity framework version(5.0 or 6.0) next --> Select tables -->Enter Model Namespace name-->Click Finish.

Step 4: Create a Controller

1.create a Controller for displaying View.To get data from database

2.I added Index action method for displaying View.And GetData action method to fetch table data from server.

3.See the code below i wrote in HomeController.cs file.

namespace JqueryDataTable.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        //It fetches Customer data from server
        public ActionResult GetData()
        {
            using(DatabaseEntities db=new DatabaseEntities())
            {
                var CustomerData = db.CustomerDatas.OrderBy(a=>a.Name).ToList();
                return Json(new { data=CustomerData },JsonRequestBehavior.AllowGet);
            }
        }
    }
}

Step 5 : Add script files

1.Now add two script files(Datatable reference files.

2.These two files are enough there is no need to add any other plugin files.

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

3.As i told the installation of this plugin is very easy compared to previous(no more complex files to add).

Step 6:Add View to display Datatables

1.Add View to Index action method.

2.Replace code in the Index.cshtml file with below code.

@{
    ViewBag.Title = "www.mitechdev.com";
}
<h2>Jquery DataTables in ASP.NET MVC5</h2>
<!--Add Jquery Datatable reference files-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<div style="width:90%;">
    <table id="Jdatatable" class="table table-responsive table-bordered">
        <thead>
            <tr>
                <th>Customer Name</th>
                <th>Company Working</th>
                <th>Email ID</th>
                <th>Phone Number</th>
                <th>City</th>
                <th>Salary</th>
                <th>State</th>
            </tr>
        </thead>
    </table>
</div>
@section scripts{
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#Jdatatable").DataTable({
            "ajax": {
                "url": "/Home/GetData",
                "type": "GET",
                "datatype":"json"
            },
            "columns": [
                        { "data": "Name", "autoWidth": true },
                        { "data": "CompanyName", "autoWidth": true },
                        { "data": "EmailID", "autoWidth": true },
                        { "data": "Phone", "autoWidth": true },
                        { "data": "City", "autoWidth": true },
                        { "data": "Salary", "autoWidth": true },
                        {"data":"State","autoWidth":true}
            ]
        });
    });
</script>
    }

3.Here I added a table with id "# Jdatatable ".

4.I simply called the Jquery Datatable using method $(#Jdatarable).DataTable();

5.I get the data from server using ajax method in DataTable method.I binded the data using " Columns ".

6.Here you no need to specify search , paging , pagination functionality.The plugin by default implements for you how easy it is.

Finally run the application...

you will get a output like below..

Download Source code for this tutorial here Source Code

Conclusion

I hope this tutorial may help for very reader and developer.Please subscribe and follow this site for daily updates...





About List