Introduction

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)

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);
    }])

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.