Thursday, January 19, 2017

Datatables in AngularJS and 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:
Image and video hosting by TinyPic

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">

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) ||
  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)
        .withOption('aaSorting', [0, 'asc'])
        //.withOption('scrollX', '100%')
        .withOption('scrollY', '300px')
        .withOption('scrollCollapse', false)


Download the SQl DB Script for this POST from HERE

No comments:

Post a Comment