current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using jqueryDataTables to sort data in tables in my app.

Rather then using a script tag on the page which it needs to be on, figured I could just include it inside of my Angular Controller code for that view, however I'm and getting a strange error.

I've used a mix of jQuery before inside of Angular, so not sure why it's not working in this case.

Error and code below: TypeError: Cannot read property 'childNodes' of undefined enter image description here

// Controller for Manage Users
app.controller('ManageUsersController', function($scope) {

    // Init
    $scope.status_dropdown = false;
    $scope.deactivate_btn = false;

    // Check all users:
    this.checkAll = function(target) {
        var checkboxes = document.getElementsByName('checkboxUser');
        var checkAll = document.getElementsByName('checkboxAll');

        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = checkAll[0].checked;
        }
    };

    alert('1');
    $('#manage_users_table').DataTable();
    alert('2');
});

HTML during first alert message: enter image description here

HTML during 2nd alert message, after DataTable() has been initialized: enter image description here

The alert pops up twice for each.

HTML
Gist: https://gist.github.com/leongaban/4f1de6bee8672b4177e5

<div id="manage_content" class="page" ng-controller="ManageUsersController as manageUsers">
    <table id="manage_users_table" width="100%">
        <tr>... hardcoded table data here



    <!-- PRODUCTION SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- DEVELOPMENT SCRIPTS -->
    <!-- Libs & Vendors -->
    <script src="src/js/libs/angular.min.js"></script>
    <script src="src/js/libs/angular-route.min.js"></script>
    <script src="src/js/libs/jquery.dataTables.js"></script>
    <script src="src/js/vendors/modernizr.min.js"></script>
    <script src="src/js/vendors/bootstrap.min.js"></script>

    <!-- Modules -->
    <script src="src/js/modules/app.js"></script>
    <script src="src/js/modules/products.js"></script>
    <script src="src/js/modules/manage.js"></script>
    <script src="src/js/modules/profile.js"></script>
</body>
share|improve this question

1 Answer 1

up vote 1 down vote accepted

Seems like this previous response didnt return data, which used to fill table. So You are trying to attach datatables script to empty table.

So I am assume error somewhere in loading table contents.

Small example with static data:

<html ng-app="someApp">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
</head>
<body>
  <div ng-controller="ManageUsersController">
        <table id="manage_users_table" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
  </div>
  <script type="text/javascript">
    var app = angular.module('someApp', []);
    app.controller('ManageUsersController', function($scope) {
        $('#manage_users_table').DataTable(); // <-- errors
    });
  </script>
</body>
</html>
share|improve this answer
1  
Could You provide html for the page? For an example paste it here: gist.github.com –  omakoleg Oct 13 '14 at 20:03
    
Ah cool! I'll use that more often now, here is the link: gist.github.com/leongaban/4f1de6bee8672b4177e5 Do you need the Angular module as well? –  Leon Gaban Oct 13 '14 at 21:40
1  
I think all issues are because of this: <div class="manage_users_table"><table id="manage_users_table" width="100%"> You have same class name and the ID for table. Change class name and hopefully You will not see errors any more. –  omakoleg Oct 14 '14 at 7:54
    
Ah interesting, so I removed the script tag form the template, changed the class name and uncommented the $('#manage_users_table').DataTable(); line and the table sort is working! But I'm still getting the Cannot read property 'childNodes' of undefined error which is causing other stuff to break. :( so strange. Going to keep working on this, but may just end up checking your answer, then writing a new one out –  Leon Gaban Oct 14 '14 at 15:38
1  
Maybe some stuff in routing. Like here: stackoverflow.com/questions/15697011/… –  omakoleg Oct 15 '14 at 13:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.