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

Question

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>

its working kariyawasam ;) http://plnkr.co/edit/NnF2I4IMplWtIdNmRvvw?p=preview — Kalhan.Toress, Oct 23 '15 at 10:40

Kalhan.Toress · Accepted Answer · 2015-10-23T10:52:33.560

25

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.

edited Oct 23 '15 at 10:52

answered Oct 23 '15 at 10:46

Kalhan.Toress

21,683
8
68
92

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 – Thusithz Oct 23 '15 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' ]); – Thusithz Oct 23 '15 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 http://plnkr.co/edit/ – Kalhan.Toress Oct 23 '15 at 11:36
glad to help you :) cheerz – Kalhan.Toress Oct 23 '15 at 12:00
I'm having the same problem and the order of js scripts are correct (angular js is in the 3rparty.js file using require('...') : – Shane Rowatt Aug 24 '16 at 06:37

score 1 · Answer 2 · answered Aug 24 '16 at 07:06

1

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="$">

or

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

answered Aug 24 '16 at 07:06

Shane Rowatt

1,951
3
27
44

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

2 Answers2