Datatables in AngularJS and asp.net mvc



Introduction

In one of the previous article, I have explained how to Implement jQuery Datatable in ASP.NET MVC application. Today I will show you how to Implement jQuery Datatable in angularJS application.

Almost all the web application need to show tabular data with server-side filtering, sorting, and paging features for resolve performance issue when working with a large amount of data. Many AngularJS grid tools are available nowadays but very few decent samples can be found.

Here in this example, I have implemented very basic datatable in angularjs application with the help of angular-datatables for made the article very simple and clean for beginners. In the next article, we will see datatables server-side paging, sorting and filtering in angularjs application.
DataTables is a plug-in for the jQuery Javascript library. It is a most powerful and easy to use jQuery plugin for display tabular data with support for Pagination, searching, State saving, Multi-column sorting with data type detection and lots more with ZERO or minimal configuration.

Just follow the following steps in order implement Datatables in AngularJS and asp.net MVC.

Here In this article, I have used Visual Studio 2013

Step-1: Create New Project.

Go to File > New > Project > ASP.NET  Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > 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.

Step-3: Create a table.

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: Add required js (dependencies of angular-datatables)  files in the application.

Here I have created a folder named "Scripts" first, and then I have added dependencies js files of angular-datatables.
Right Click on your solution file (from solution explorer) > Add > New Folder > Renamed your folder (here I have renamed as "Scripts"). and then
Right click on your folder (just created) > Add > Existing Item > select  dependencies js files file > Add. (Download)

Step-6: Add required css files in the application.

Here I have created a folder named "css" first, and then I have added 2 css files.
Right Click on your solution file (from solution explorer) > Add > New Folder > Renamed your folder (here I have renamed as "css"). and then
Right click on your folder (just created) > Add > Existing Item > select  css files file > Add. (Download)

Step-7: Add 3 image files for sorting icons.

Same way I have added a folder named "images" here and then I have added 3 image files for sorting icon.
Right Click on your solution file (from solution explorer) > Add > New Folder > Renamed your folder (here I have renamed as "Images"). and then
Right click on your folder (just created) > Add > Existing Item > select  image files file > Add. (Download)

Solution Explorer

Step-8: Create a javascript file for angular components.

Here I have added a javascript file in the "Scripts" folder for add angular components (module, controller etc).

Right click on your "Scripts" folder > Add > New Item > select "javascript" file > Enter name (here "myApp.js")> Ok.
Write following code
var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("CustomerID", "Customer ID"),
            DTColumnBuilder.newColumn("CompanyName", "Company Name"),
            DTColumnBuilder.newColumn("ContactName", "Contact Name"),
            DTColumnBuilder.newColumn("Phone", "Phone"),
            DTColumnBuilder.newColumn("City", "City")
        ]

        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            url: "/home/getdata",
            type: "POST"
        })
        .withPaginationType('full_numbers')
        .withDisplayLength(10);
    }])
you can see here I have included the datatables module in our module (here "MyApp") for implement datatables in our angularjs application. 

Step-9: 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 named "HomeController"

Step-10: Add new action into your controller for getting the view, where we will show data in datatables. 

Here I have added "Index" Action into "Home" Controller. Please write this following code
public ActionResult Index()
{
    return View();
}

Step-11: Add view for your Action & design for showing data in datatables.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@* CSS *@
<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/jquery.dataTables.min.css" rel="stylesheet" />
@* JS for angularJS and Datatable *@
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>
@* JS for our angularjs module, controller etc. *@
<script src="~/Scripts/myApp.js"></script>
@* HTML *@

<div ng-app="MyApp" class="container">
    <div ng-controller="homeCtrl">
        <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table> 
    </div>
</div>

Step-12: Add an another action into your controller for getting data from a database for showing in datatables.

public ActionResult getData()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        return Json(dc.Customers.ToList());
    }
}

Step-13: Run application.




Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.