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

Problem

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>

Problem courtesy of: Thusithz

Solution

I think you have add javascript files in wrong order.

you need to add in this order

  1. JQUERY
  2. ANGULAR
  3. JQUERY DATA-TABLE
  4. ANGULAR DATA-TABLE

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.

Solution courtesy of: K.Toress

Discussion

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">
Discussion courtesy of: Shane Rowatt

This recipe can be found in it's original form on Stack Over Flow.