Use Angular js with datatable js

Question

I am new for both Angular and datatable.

I am creating ASP.NET MVC Application using this two js and want to display records in the table.

Table displays the records but searching and sorting facility is not available I mean not running. I don't know how to integrate both to use in one page.

Can anyone help me to come out from this problem?

Code:

I have $scope.Customers which has fields Name, Phone , Email and more...

 $scope.getCustomers = function () {
        customerService.GetCustomers()
        .then(
            function (response) {
                console.log("Get Customer call");
                $scope.Customers = response.data.Result;
            }
        );
    }

Here I got the list of customers and binded successfully and my HTML code is:

<table id="tblcustomers" class="table table-striped table-condensed table-bordered no-margin">
                            <thead>
                                <tr>
                                    <th>Customer Name</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Active</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="cust in Customers track by $index">
                                    <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td>
                                    <td>{{cust.Adddress_Line_1}}</td>
                                    <td>{{cust.Phone}}</td>
                                    <td>{{cust.Email}}</td>
                                    <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
                                    <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
                                    <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td>
                                </tr>
                            </tbody>
                        </table>

output:

angular module:

var app;
(function () {
    app = angular.module("ANG", []);
})();

i think you need to attach the datatable plug in .. ddid you do it? — federico scamuzzi
– federico scamuzzi, Commented Feb 17, 2017 at 9:06
ok..you include it..but you need to innitialize it and attach toyour table...try my answer maybe — federico scamuzzi
– federico scamuzzi, Commented Feb 17, 2017 at 9:13

Pengyy · Accepted Answer · 2017-02-17 13:01:40Z

The DataTable.js filter data after the document is rendered completely. Use DataTables settings after the document is rendered completely. see demo here:

var app = angular.module('app', []);

app.directive('testTable', function($timeout) {
  return {
    restrict: 'A',
    link: function() {
      $timeout(function() {
        $('#tblcustomers').DataTable();
      });
    }
  }
});

var testCtrl = app.controller('testCtrl', function($scope) {
  $scope.Customers = [];

  var i = 20;
  while (i > 0) {
    $scope.Customers.push({
      CustomerName: 'test' + i,
      Adddress_Line_1: 'testAddr' + i,
      Phone: '000-000-00' + i,
      Email: 'sample' + i + '@xxx.com',
      IsActive: true
    });
    i--;
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>DataTable test for Angular</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>

<body ng-app="app">
  <div ng-controller="testCtrl">
    <table id="tblcustomers" test-table class="table table-striped table-condensed table-bordered no-margin">
      <thead>
        <tr>
          <th>Customer Name</th>
          <th>Address</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Active</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Customer Name</th>
          <th>Address</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Active</th>
          <th>Delete</th>
        </tr>
      </tfoot>
      <tbody>
        <tr ng-repeat="cust in Customers track by $index">
          <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td>
          <td>{{cust.Adddress_Line_1}}</td>
          <td>{{cust.Phone}}</td>
          <td>{{cust.Email}}</td>
          <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
          <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
          <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

datatable's usecase show the usual way: initial the datatable in document.ready(). In angular, we have to use $timeout to do things that after document.ready().

3 rules · Accepted Answer · 2017-02-17 09:24:51Z

0

have you troed something like to put in a directive the datatables initialization?

something like:

    "use strict";

angular.module("ANG")
    .directive("grid", ["$timeout", function ($timeout) {
        return {
            restrict: "EA",
            link: function (scope, element, attrs) {

                $timeout(function () {

                    $(element).DataTable();
                }, 200);
            }
        }
    }]);

and then use it like:

<table id="tblcustomers" grid class="table table-striped table-condensed table-bordered no-margin">
                            <thead>
                                <tr>
                                    <th>Customer Name</th>
                                    <th>Address</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Active</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="cust in Customers track by $index">
                                    <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td>
                                    <td>{{cust.Adddress_Line_1}}</td>
                                    <td>{{cust.Phone}}</td>
                                    <td>{{cust.Email}}</td>
                                    <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
                                    <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
                                    <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td>
                                </tr>
                            </tbody>
                        </table>

edited Feb 17, 2017 at 9:24

3 rules

1,3813 gold badges29 silver badges58 bronze badges

answered Feb 17, 2017 at 9:10

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

4 Comments

federico scamuzzi Over a year ago

which is you module name?

federico scamuzzi Over a year ago

check now if it is ok..sorry :-)

federico scamuzzi Over a year ago

yep ..but chekc if it works now ... if not..try to put your id instead of elemen..so something like: $('#tblcustomers').DataTable();

3 rules Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Use Angular js with datatable js

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related