Implement jQuery Datatable in ASP.NET MVC application

Introduction

Here in this article, we will see how to Implement jQuery Datatable in ASP.NET MVC application.
DataTables is a most powerful and easy to use jQuery plugin for display tabular data (table listings) with support for Pagination, searching, State saving, Multi-column sorting with data type detection and lots more with ZERO or minimal configuration. Most important It is open source.

Do you have AngularJS application? Please visit datatables in AngularJS and asp.net mvc in order to implement datatables in angular application.

Before this article, I have explained How to use Telerik Grid in MVC4 application , How to display database data in webgrid in mvc and more about gridview for display tabular data in our application.

Here we will see followings with ASP.NET MVC as server side...

DataTables is very easy to use. We just need to add 1 CSS file, and 1 js file and 3 lines of jquery code as below to start.

            //cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css
            //cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
            <script>
                $(document).ready(function () {
                    $('#myTable').DataTable();
                });
            </script>

you can check the below code...

            <html>
            <head>
              <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
            </head>
            <body>
            <div style="width:400px; margin:0 auto">
              <table id="myTable" >
                <thead>
                  <tr><th>Country</th></tr>
                </thead>
                <tbody>
                  <tr><td>India</td></tr>
                  <tr><td>UK</td></tr>
                  <tr><td>USA</td></tr>
                </tbody>
              </table>
            </div>
              <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
              <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
              <script>
              $(function(){
                $("#myTable").dataTable();
              })
              </script>
            </body>
            </html>

But it will be useful when I will fetch data from server side for display in jQuery DataTable. So, Here we will see How to fetch data from server side and display in jQuery DataTable.

Just follow the following steps in order Implement jQuery Datatable (Basic initialization) in ASP.NET MVC application.

Step-1: Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Basic > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.
Here I have added a database for store some location information in our database for show in the google map.

Step-3: Create a table.

Here I will create 1 table (as below) for store data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used 1 table as below

Step-4: Add Entity Data Model.

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.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create a Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller "HomeController"

Step-6: Add new action into the controller to get the view where we will implement jQuery DataTable

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
    return View();
}

Step-7: Add view for the action (here "Index") & design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
Complete HTML code

@{
    ViewBag.Title = "Index";
}

<h2>Part 1 : Implement jQuery Datatable in ASP.NET MVC</h2>
<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Employee Name</th>
                <th>Company</th>
                <th>Phone</th>
                <th>Country</th>
                <th>City</th>
                <th>Postal Code</th>
            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
    background-color: #F5F5F5 !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 () {
            $('#myTable').DataTable({
                "ajax": {
                    "url": "/home/loaddata",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns" : [
                        { "data": "ContactName", "autoWidth": true },
                        { "data": "CompanyName", "autoWidth": true },
                        { "data": "Phone", "autoWidth": true },
                        { "data": "Country", "autoWidth": true },
                        { "data": "City", "autoWidth": true },
                        { "data": "PostalCode", "autoWidth": true }
                    ]
            });
        });
    </script>
}

Step-8: Add another action (here "loaddata") for fetch data from the database.

public ActionResult loaddata()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        // dc.Configuration.LazyLoadingEnabled = false; // if your table is relational, contain foreign key
        var data = dc.Customers.OrderBy(a => a.ContactName).ToList();
        return Json(new { data = data }, JsonRequestBehavior.AllowGet);
    }
}

Step-9: Run Application.

Yahoooooo! We have done.... BUT here in this article we fetched all the data from server at once and done pagination, sorting, instant searching at client side. This can be a performance issue fetching a large amount of data from server side at once. To resolve this performance issue, we can integrate server-side pagination, sorting and searching. In the next article, I have implemented jQuery DataTable server side pagination and sorting in ASP.NET MVC application

Download & Live Demo