$(...).dataTable is not a function using angular js

Question

problem

we are using angular & jquery.
problem occurs when switching state say dashboard to mylogs.
when i run url for mylogs then datatable is working with no error.
then i click on dashboard it works no error.
then i again click on mylogs link then angular js would not found jquery datatable function.
therefore it throws error

angular code

  var sbAdmin2 = angular.module('sbAdmin2', ['ui.router','ngSanitize']);
  sbAdmin2.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard/data');

    $stateProvider
         .state('Dashboard', {
            url: '/dashboard/data',
            templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/dashboard/data'
        })
                 .state('My Logs', {
                            url: '/my_dt_test',
                            data: {
                                pageHeader: 'My Logs',
                                ncyBreadcrumbLabel: 'My Logs'
                            },
                            ncyBreadcrumb: {
                                label: 'My Logs'
                            },
                            views: {
                                "@": {
                                    templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/my_datatable_list1'

                                }
                            }
                        })

html

   <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
   <script src="{{ asset ('common/assets/libs/jquery/jquery-ui/js/jquery-ui.min.js') }}?v={{ app_version }}"></script>
    <script src="{{asset('common/assets/libs/angular/source/angular.js') }}?v={{ app_version }}_{{ NOW }}"></script>
    <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-ui-router.js') }}?v={{ app_version }}_{{ NOW }}"></script>
     <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-sanitize.js') }}?v={{ app_version }}_{{ NOW }}"></script>


        <!-angular version 1.06------>
         <body>
         <div id="test" ui-view>
         {% body_block %}{%endblock%}
          </div>
           </body>

datatable is rendered in html view

          var dataTableVar_eserv_mylogs_new_table = $('#eserv_mylogs_new_table').dataTable({
            "columns": [{"sTitle":"Job_NO","sName":"logId"},{"sTitle":"customer","sName":"customer"}],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": dataTable_ajax_source_eserv_mylogs_new_table,
            "sPaginationType": "full_numbers",
            "asStripeClasses": null,
            "iDisplayLength": 10,
            //"colReorder": true,



            "paging": true,


            buttons: [{
            extend: 'colvis',
            text: 'Custom Columns',
            className: 'btn btn-default pull-right extra_btn'
        }],
            "oLanguage": {
                "sProcessing": (typeof PreloaderImagePath != 'undefined' ? '<img alt="Loading data... Please wait" src="' + PreloaderImagePath + '" />' : 'Processing...'),
                "sInfoFiltered": " (filtered from _MAX_ total entries)",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sNext": "Next",
                    "sPrevious": "Previous"
                },
                "sZeroRecords": "No data available in table",
                "sInfoEmpty": "Showing 0 to 0 of 0 entries",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
                "sLengthMenu": '<span class="desktop_inline_text">Show</span> _MENU_ <span class="desktop_inline_text">Rows</span>'
            },

datatable we rendering through symfony2 library.

  on page reload its working then its stop working on swapping state

Error im getting

     TypeError: $(...).dataTable is not a function
at eval (eval at globalEval (http://code.jquery.com/jquery-2.1.1.js:330:5), <anonymous>:18:84)
at Function.globalEval (http://code.jquery.com/jquery-2.1.1.js:330:5)
at jQuery.domManip (http://code.jquery.com/jquery-2.1.1.js:5411:16)
at jQuery.append (http://code.jquery.com/jquery-2.1.1.js:5194:15)
at jQuery.<anonymous> (http://code.jquery.com/jquery-2.1.1.js:5309:18)
at jQuery.access (http://code.jquery.com/jquery-2.1.1.js:3465:8)
at jQuery.html (http://code.jquery.com/jquery-2.1.1.js:5276:10)
at http://localhost/weblogs-s2/web/common/assets/libs/angular/source/modules/angular-ui-router.js?v=1.6.10_1475157720:2791:18
at invokeLinkFn (http://localhost/weblogs-s2/web/common/assets/libs/angular/source/angular.js?v=1.6.10_1475157720:8525:9)
at nodeLinkFn (http://localhost/weblogs-s2/web/common/assets/libs/angular/source/angular.js?v=1.6.10_1475157720:8034:11) <div id="wrapper" ui-view="" class="container ng-scope font_size_100">

i have tried to debug this problem angular code snippet

        .state('My Logs', {



                        url: '/my_dt_test',

                         views: {



                            "@": {



                                templateUrl: function ($node) {

                                    console.log("testing");

                                    return root_url + 'my_datatable_list1';
                                }


                            }

                        }
                       })

issue i found when i reload the url mydb_test then datatable is visible with no error.
after when i change state i get value in console.log but doesn"t return any template file.
it only display error dataTable is not a function i think jquery is doing some issue.

what we need

we checked jquery loads first time at top order but when angular js works it would not able to call dataTable function of jquery.
please advice in this issue.

datatable() is a jQuery plugin. If you don't include it, you cannot use it... — A. Wolff
on page reload its working then its stop working on swapping state — afeef

Sravan Sravan · Accepted Answer · 2016-09-29T12:32:45

Add a run block and after every state-change, capture the state-change-success and reload the data tables.

var sbAdmin2 = angular.module('sbAdmin2', ['ui.router','ngSanitize']);
  sbAdmin2.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard/data');

    $stateProvider
         .state('Dashboard', {
            url: '/dashboard/data',
            templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/dashboard/data'
        })
                 .state('My Logs', {
                            url: '/my_dt_test',
                            data: {
                                pageHeader: 'My Logs',
                                ncyBreadcrumbLabel: 'My Logs'
                            },
                            ncyBreadcrumb: {
                                label: 'My Logs'
                            },
                            views: {
                                "@": {
                                    templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/my_datatable_list1'

                                }
                            }
                        })
    });

    sbAdmin2.run(function($rootScope) {
      $rootScope.$on('$stateChangeSuccess', function(event, toState){ 
        angular.element('#eserv_mylogs_new_table').dataTable();
      })
    })

$(...).dataTable is not a function using angular js

1 Answers