$elem.hide is not a function in angular-datatable

Asked 23/10, 2015 at 10:30 Answered 24/8, 2016 at 7:6

Solved angularjs npm bower angular-datatables

I want to use pagination plugin angular-datatable .I installed it with bower but it does n't work.It gives the below error

TypeError: $elem.hide is not a function at Object.showLoading (http://localhost:8000/vendor/angular-datatables.js:698:15) at postLink (http://localhost:8000/vendor/angular-datatables.js:47:31) at http://localhost:8000/vendor/angular.js:8783:44 at invokeLinkFn (http://localhost:8000/vendor/angular.js:8789:9) at nodeLinkFn (http://localhost:8000/vendor/angular.js:8289:11) at compositeLinkFn (http://localhost:8000/vendor/angular.js:7680:13) at compositeLinkFn (http://localhost:8000/vendor/angular.js:7684:13) at compositeLinkFn (http://localhost:8000/vendor/angular.js:7684:13) at compositeLinkFn (http://localhost:8000/vendor/angular.js:7684:13) at compositeLinkFn (http://localhost:8000/vendor/angular.js:7684:13)

I used Zero configuration, here is the html code which i used

<table datatable="" class="row-border hover">
    <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>

Salsify answered 23/10, 2015 at 10:30 Comment(1)

its working kariyawasam ;) plnkr.co/edit/NnF2I4IMplWtIdNmRvvw?p=preview – Francinafrancine 23/10, 2015 at 10:40

I think you have add javascript files in wrong order.

you need to add in this order

and don't forget to add the datatables module to the main module as,

EX: angular.module('plunker', ['datatables']);

DEMO

Simply - If you add the jquery.js after the angular.js, then cut the jquery.js and place it in top of the angular.js.

If you are using bower then update bower.json to meet the above changes.

Francinafrancine answered 23/10, 2015 at 10:46 Comment(5)

i used bower.still same issue i do n't why .I added in that order.all the plugin linked properly head of the html.I am using gulp. Initialize 'datatable' in app.js – Salsify 23/10, 2015 at 11:20

angular.module('app',[ 'pascalprecht.translate', 'tmh.dynamicLocale', 'ngCookies', 'ngBootbox', 'ui-notification', 'dashboard', 'bank', 'payment', 'userAccounts', 'accountSettings', 'credit-cards', 'help', 'contact', 'ngDialog', 'daterangepicker', 'datatables' ]); – Salsify 23/10, 2015 at 11:21

check the content of the page by viewing source of the page and verify all the js files are in proper order as in the answer. If you still get the error try to create a plnkr.co/edit – Francinafrancine 23/10, 2015 at 11:36

glad to help you :) cheerz – Francinafrancine 23/10, 2015 at 12:0

I'm having the same problem and the order of js scripts are correct (angular js is in the 3rparty.js file using require('...') : <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script> <script src='js/modernizr.js'></script> <script src='js/3rdparty.js'></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.4.3/angular-datatables.js"></script> – Lear 24/8, 2016 at 6:37

Also, make sure you don't have the ng-jq directive set to nothing. Instead you want to set it to $ or jQuery i.e.

<html id="ng-app" ng-jq="$">

<html id="ng-app" ng-jq="jQuery">

Lear answered 24/8, 2016 at 7:6 Comment(0)

Recommended topics

Hot tags