AngularJS – Easy way to implement jQuery DataTable with ng-repeat

After spending lots of time over searching How to easily implement jQuery DataTable in AngularJS with ng-repeat options (which seems very easy to do but not), I got a very simple way to do this.

Here are simple steps to implement jQuery DataTables to AngularJS data.

 

Include the JS file in your index.html file:

<script src="jquery.min.js"></script> Download
<script src="jquery.dataTables.min.js"></script> Download
<script src="angular.min.js"></script> Download
<script src="angular-datatables.min.js"></script> Download

 

In your controller:

angular.module('myModule', ['datatables'])
.controller("MyCtrl", function($scope, DTOptionsBuilder)
{
    $scope.users = {};

    // DataTables configurable options
    $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withDisplayLength(10)
        .withOption('bLengthChange', false);

    $http.get('api/data_url')
        .success(function(data, status, headers, config) {
            $scope.users = data;
        });
});

 

In your view/template:

<div ng-controller="UsersCtrl">
    <table datatable="ng" dt-options="dtOptions">
        <thead>
            <tr>
                <th>S. No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{{$index + 1}}</td>
                <td>{{user.fullname}}</td>
                <td>{{user.email}}</td>
            </tr>
        </tbody>
    </table>
</div>

 
See Demo at: Plunker

 

 

24. June 2015 by Alauddin Ansari AngularJS, Javascript 5 comments 49,734 views Tags: ,

Comments (5)

  1. Hi!

    With would be to call in html if I took the $ scope in the Controller?
    as follows:

    angular.module(‘myModule’, [‘datatables’])
    .controller(“MyCtrl”, function($scope, DTOptionsBuilder)
    {

    $scope.users = {};

    // DataTables configurable options
    $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption(‘bLengthChange’, false);

    $http.get(‘api/data_url’)
    .success(function(data, status, headers, config) {
    $scope.users = data;
    });
    });

  2. angular.module(‘myModule’, [‘datatables’])
    .controller(“MyCtrl”, function($scope, DTOptionsBuilder)
    {
    local = this;

    local.users = {};

    // DataTables configurable options
    local.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption(‘bLengthChange’, false);

    $http.get(‘api/data_url’)
    .success(function(data, status, headers, config) {
    local.users = data;
    });
    });

  3. This is very Nice. Perfectly working for Me. Thank you!!

  4. Hi Ansari,
    This post is awesome. implemented that code. but often it is throwing some error. i googled it but not solved.
    see this screenshot. https://snag.gy/qXtLsi.jpg and please reply.

Leave a Reply