Angular Datatables (Zero Configuration?)

Question

I am somewhat new to Angular and completely new to the Angular-Datatables module. However the documentation for Angular-DT isn't working for me.

Following the instructions, I have installed Angular-Datatables through Bower, included the JS file in my index.html, and declared the dependency within my module. Here is the contents of my controller.js file:

'use strict';

/* Controllers */

angular.module('myApp.controllers', ['datatables'])
  .controller('MyCtrl1', ['$scope', function($scope) {

  }])
  .controller('MyCtrl2', ['$scope', function($scope) {

  }]);

and here is the table within the partial1.html file:

<table datatable="">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Foo</td>
            <td>Bar</td>
        </tr>
        <tr>
            <td>123</td>
            <td>Someone</td>
            <td>Youknow</td>
        </tr>
        <tr>
            <td>987</td>
            <td>Iamout</td>
            <td>Ofinspiration</td>
        </tr>
    </tbody>
</table>

And here is my index.html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <

![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>DataTables: Bach</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <!--datatables style-->
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
  <link rel="stylesheet" href="css/app.css"/>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
  <!--jquery-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!--datatables-->
  <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
  <!--angular-datatables-->
  <script src="bower_components/angular-datatables/dist/angular-datatables.js"></script>
</body>
</html>

My browser shows a normal table and beneath the table a message: Loading...

I am using very similar code to the example in the documentation titled Zero Configuration. Does anyone have an idea of what I might be missing? Thanks in advance!

Here's the plunkr from Zero Config. There's no "Loading...". If something's wrong in your code, it's probably elsewhere. — Goodzilla
– Goodzilla, Commented Jul 18, 2014 at 21:28
Thanks Goodzilla. My frustration is that I don't know where else in the code to look. There are really only 3 files to modify... I wish the documentation would reveal a little more. — ArthurianConan
– ArthurianConan, Commented Jul 21, 2014 at 20:31

Andre Coetser · Accepted Answer · 2014-08-20 01:30:30Z

1

The issue is caused by your script ordering - it should be Jquery,Jquery-Datatables, Angular, Angular-Datatables, then your app script.

If you put angular first you get the loading error you describe - I agree, it could be more descriptive in the documentation.

answered Aug 20, 2014 at 1:30

Andre Coetser

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Datatables (Zero Configuration?)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related