ReddyInfoSoft: Datatables Column Filter with AngularJS and asp.net mvc

Continuing the previous Post from HERE
In the previous posts I had shown
DataTables in MVC:

AngularJS:

Out Put:

In the Previous Post I had shown how to use Angular-DataTables in MVC. Continuing the previous POST, Open _Layout.cshtml and ADD ng-app="MyApp" and it looks as shown below.

  

<html ng-app="MyApp">

</html>

Now add Dependency in APP.js file as shown below

  

var app = angular.module('MyApp', ['datatables', 'datatables.light-columnfilter']);

Now ADD a new APPColumnFilter.js file and add the script as shown below

  


app.controller('colFilterController', ['$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/getEmployeeColFilter/",
            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)        
        .withDOM('lrtip')// Hides Default Search

        //#region Col Filter Light  
  
        .withLightColumnFilter({
            '0': { html: 'input', type: 'text' },
            '1': { html: 'input', type: 'text' },
            '2': { html: 'input', type: 'text' },
            '3': { html: 'input', type: 'text' },
            '4': { html: 'input', type: 'text' },
            //'5': { html: 'range', type: 'date' }// Not firing
            '5': { html: 'input', type: 'date' }
        })

        //#endregion Col Filter Light
    }]);

In the same way ADD new Meathod and New ActionResult in HomeController.cshtml as shown Below

  

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

public ActionResult getEmployeeColFilter()
{
 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 ID = Request.Form.GetValues("columns[0][search][value]").GetValue(0);
 var FirstName = Request.Form.GetValues("columns[1][search][value]").GetValue(0);
 var LastName = Request.Form.GetValues("columns[2][search][value]").GetValue(0);
 var Gender = Request.Form.GetValues("columns[3][search][value]").GetValue(0);
 var Sal = Request.Form.GetValues("columns[4][search][value]").GetValue(0);
 var DOJ = Request.Form.GetValues("columns[5][search][value]").GetValue(0);

 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();

  rslt = rslt.Where(a =>
    a.ID.ToString().Contains(ID.ToString()) &&
    a.FirstName.Contains(FirstName.ToString()) &&
    a.LastName.Contains(LastName.ToString()) &&
    a.Gender.Contains(Gender.ToString()) &&
    a.Salary.ToString().Contains(Sal.ToString())
    ).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 });
}

Now ADD View for above created ActionResult and add the script as shown

  

@{
    ViewBag.Title = "Column Filtering 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/AngularDT/dataTables.lightColumnFilter.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/plugins/light-columnfilter/angular-datatables.light-columnfilter.js"></script>
<script src="~/Scripts/AngularDT/APP.js"></script>
<script src="~/Scripts/AngularDT/APPColumnFilter.js"></script>

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

ReddyInfoSoft

Thursday, January 19, 2017

Datatables Column Filter with AngularJS and asp.net mvc

No comments:

Post a Comment