example of check boxes in angular-datatable

Press Me

MVC Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication3.Models;

namespace WebApplication3.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Gets()
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
        [HttpPost]
        public JsonResult DeleteAll(List<int> lst)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                obj.EMPs.RemoveRange(obj.EMPs.Where(m => lst.Contains(m.EID)));
                obj.SaveChanges();
                return Json("Data Deleted", JsonRequestBehavior.AllowGet);
            }
        }
    }
}


Angular js code :

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<style>
    .TBL {
        border: solid 1px #000000;
        height: auto;
        width: auto;
    }
</style>

<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="~/scripts/angular.js"></script>
<script type="text/javascript" src="~/scripts/angular-datatables.js"></script>

<div class="container" ng-app="app" ng-controller="Ctrl" style="margin-top:20px">
    <div class="TBL">
        <table id="dt" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-bordered table-hover table-condensed table-responsive table-striped"></table>
    </div>
    <br /><br />
    <p>   
    <input type="button" value="Delete All" class="btn btn-primary" ng-click="display()" />
    </p>

</div>

<script type="text/javascript">
    var app = angular.module('app', ['datatables']);
    app.controller('Ctrl', function ($scope, $http, $compile, $window, DTOptionsBuilder, DTColumnBuilder) {
       
        $scope.arr = [];
        $scope.selected = {};
        $scope.selectAll = false;
        $scope.toggleAll = toggleAll;
        $scope.toggleOne = toggleOne;
        var titleHtml = '<input type="checkbox" ng-model="selectAll" ng-click="toggleAll(selectAll, selected)">';
       
     
            $scope.dtColumns = [
             DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
        .renderWith(function (data, type, full, meta) {
            $scope.selected[full.EID] = false;
            return '<input type="checkbox" ng-model="selected[' + data.EID + ']" ng-click="toggleOne(selected)">';
        }).withClass("text-center"),
        DTColumnBuilder.newColumn('EID').withTitle('Eid'),
        DTColumnBuilder.newColumn("firstName", "First Name"),
        DTColumnBuilder.newColumn("lastName", "Last Name")
        ]
            $scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('stateSave', true)
                .withOption('responsive', true)
                .withOption("bProcessing", true)
                .withOption('bFilter', true)
                .withOption('ajax', {
                    url: "/Home/Gets",
                    type: "Get",
                    catch: false
                })
            .withOption('aLengthMenu', [2, 10, 20, 30, 50])
            .withPaginationType('full_numbers')
            .withDisplayLength(2)
                .withOption('headerCallback', function (header) {
                    if (!$scope.headerCompiled) {
                        $scope.headerCompiled = true;
                        $compile(angular.element(header).contents())($scope);
                    }
                })
            .withOption('createdRow', function (row, data, dataIndex) {
                $compile(angular.element(row).contents())($scope);

            });
           


       
       
        function toggleAll(selectAll, selectedItems) {
            for (var id in selectedItems) {
               
                if (selectedItems.hasOwnProperty(id)) {
                    selectedItems[id] = selectAll;
                   
                }
            }
        }
        function toggleOne(selectedItems) {
            for (var id in selectedItems) {
                if (selectedItems.hasOwnProperty(id)) {
                    if (!selectedItems[id]) {
                        $scope.selectAll = false;
                        return;
                    }
                   
                     
                }
            }
            $scope.selectAll = true;
        }
     
        $scope.display = function ()
        {
            angular.forEach($scope.selected, function (i, j) {
                if (i==true)
                {
                    $scope.arr.push(j);
                }
            });
            var confic = {
                 type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                cache: false
            };
            if (confirm('Do you want to delete selected items from the list ?'))
            {
                $http.post("/Home/DeleteAll", $scope.arr, confic).then(function (promise) {
                    alert(promise.data);
                    $window.location.reload();
                });
            }
        }
        });
</script>