AngularJS and DataTables integration

alzhin · January 2016

I am adding a new row to DataTable and it's not being picked up by AngularJS. Can anybody show how to tie these two? Basically, I need that new row behave like the original row, i.e. execute callGetRow function. Any help is much appreciated.

<html ng-app>
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script>

function RESTCall($scope, $http) {  
    $scope.callGetRow = function(line) {
        alert(line);
    };

    $scope.callAddNew = function() {
        $('#example').DataTable().row.add(["2.0","Item 2", "Generic Desc", "2", 200]).draw();
    };      
}
</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example" cellspacing="0" >
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>

alzhin · March 2016

The solution is in the example below. Basically, I had to add drop adding rows using DataTable and use AngularJS to create content, compile it and use JQuery to add it to the selector in my HTML.

Things that needed to be done:
- Remove DataTables code
- Put my functions inside controller and inject Angular services I needed (scope, compile, element)
- use AngularJS to create content and compile it
- Add class name to tbody for JQuery to append the new row to

<html ng-app="problemApp">
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />

<script>

    var myApp = angular.module("problemApp", []);

    myApp.controller("RESTCall", function ($scope, $compile, $element) {

        $scope.callGetRow = function(line) {
            alert(line);
        };

        $scope.callAddNew = function() {
            
            //define the element 
            $scope.content = "<tr ng-click=\"callGetRow('2/0')\" id=\"2.0\"><td>2.0</td><td>Item 2</td><td>Generic Description 2</td><td>1</td><td>200</td></tr>";

            //wrap it in jqLite
            var tblElem = angular.element($scope.content);
            
            //create a function to generate content
            var compileFn = $compile(tblElem);

            //execute the compilation function
            compileFn($scope);
            
            // add to DOM
            $( ".toappend" ).append(tblElem);
        };      
            
    });

    $(document).ready( function() {
      $('#example').dataTable();
    } );

</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example">
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody class="toappend">
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>

AngularJS and DataTables integration

AngularJS and DataTables integration

Answers

Howdy, Stranger!

Categories

DataTables

AngularJS and DataTables integration

AngularJS and DataTables integration

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables