Datatables in AngularJS and asp.net mvc

Here I will show how to use JQuery DataTables with AngularJS in Asp.Net MVC.
In the previous posts I had shown

DataTables in MVC:

• Code First Migrations in MVC 5
• Jquery DataTable in MVC
• Jquery DataTable multisearch paging and Sorting in MVC server side
• Jquery DataTable paging, Sorting and Multi search with datepicker in MVC server side
• Cascading DropDowns in Asp.Net MVC

AngularJS:

• Two way Binding in AngularJS
• Simple Routing in AngularJS

Out Put:

Steps:
Create a Asp.Net MVC application in Visual Studio 2015.
FromNuGet Package Manager ADD the Following packages

• System.Linq.Dynamic
• AngularJS

and download angular-datatables from THIS web site or from HERE 

Now add the appropriate Scripts as shown below.

@{ 
 ViewBag.Title = "Home Page"; 
}

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/AngularDT/angular-datatables.js"></script>
<script src="~/Scripts/AngularDT/APP.js"></script>

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

ADD ADO.Net Entity DataModal as Shown CRUD Operations in ASP.Net MVC 5 without writing single line of Code
Ones it is finished ADD below code in HomeController.cs file

  

public ActionResult getEmployeeListAll()
{
 var draw = Request.Form.GetValues("draw").FirstOrDefault();
 var start = Request.Form.GetValues("start").FirstOrDefault();
 var length = Request.Form.GetValues("length").FirstOrDefault();
 var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
 var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
 var searchValue = Request.Form.GetValues("search[value]").FirstOrDefault();

 List empList = new List();
 int PageSize = length != null ? Convert.ToInt32(length) : 0;
 int Skip = start != null ? Convert.ToInt32(start) : 0;
 int RecordsTotal = 0;

 using (EmployeeDBEntities ent = new EmployeeDBEntities())
 {
  var rslt = ent.Employees.ToList();
  if (!string.IsNullOrEmpty(searchValue))
  {
   rslt = rslt.Where(a =>
    a.ID.ToString().Contains(searchValue) ||
    a.FirstName.Contains(searchValue) ||
    a.LastName.Contains(searchValue) ||
    a.Gender.Contains(searchValue) ||
    a.Salary.ToString().Contains(searchValue)
    ).ToList();
  }
  //sorting
  if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
  {   
   rslt = rslt.OrderBy(sortColumn + " " + sortColumnDir).ToList();
  }
  RecordsTotal = rslt.Count();
  empList = rslt.Skip(Skip).Take(PageSize).ToList();
 }
 return Json(new { draw = draw, recordsFiltered = RecordsTotal, recordsTotal = RecordsTotal, data = empList });
}

ADD APP.js file with in this file write the below code

  

var app = angular.module('MyApp', ['datatables'])
.controller('homeController', ['$scope', '$http', '$filter', 'DTOptionsBuilder', 'DTColumnBuilder',

    function ($scope, $http, $filter, DTOptionsBuilder, DTColumnBuilder) {

        $scope.dtColumns = [
        DTColumnBuilder.newColumn("ID", "ID").withOption('name', 'ID'),
        DTColumnBuilder.newColumn("FirstName", "First Name").withOption('name', 'FirstName'),
        DTColumnBuilder.newColumn("LastName", "Last Name").withOption('name', 'LasttName'),
        DTColumnBuilder.newColumn("Gender", "Gender").withOption('name', 'Gender'),
        DTColumnBuilder.newColumn("Salary", "Salary").withOption('name', 'Salary'),
        DTColumnBuilder.newColumn("DOJ", "Date of Join")
            .withOption('name', 'DOJ').renderWith(function (data, type) {
                var dt = data.replace("/Date(", "").replace(")/", "");
                return $filter('date')(dt, 'dd/MM/yyyy'); //date filter
            })
        ];

        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            dataSrc: "data",
            url: "/home/getEmployeeListAll/",
            type: "POST"
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('aaSorting', [0, 'asc'])
        //.withOption('scrollX', '100%')
        .withOption('scrollY', '300px')
        .withOption('scrollCollapse', false)

    }]);

Download the SQl DB Script for this POST from HERE