Search code examples
jqueryangularjsionic-frameworkdatatableionic-view

IONIC datatables - error while using angular 1.x data tables in ionic 1.x

I am trying to use angular datatables from http://l-lin.github.io/angular-datatables/archives/#/zeroConfig but getting this error ionic datatable error snippet

<head>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
  <script src="js/app.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/ion.sound.min.js"></script>
  <script src="js/angular-datatables/angular-datatables.js"></script>
  <script src="js/jquery.dataTables.min.js"></script>
</head>
  <body ng-app="starter">
  </body>

app.js

there is no .state()in app.js and no separate controller for it. As I'm not using any view{} or .state() for it. Instead displaying it using & . So, Below is logic for controller that I'm using.

view1 using viewCtrl is displayed initially after login and view2 is dispalyed when view1 is not true i.e. $scope.view1=false; Using same controller for view2 as for view1. And in view2 I am trying to display datatable, which is giving above error.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'datatables'])
.run(function($ionicPlatform) {}
Solution

  • Since angular is loaded in ionic first by default. So, we need to place ionic.js in the below mentioned sequence. Ionic loads angular itself so we need not define it separately.

    <script src="js/jquery.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="js/angular-datatables.min.js"></script>
<link href="css/angular-datatables.css"></link>