Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 347
Thusithz Avatar asked Oct 23 '15 10:10

Thusithz


2 Answers

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.

like image 120
Kalhan.Toress Avatar answered Nov 07 '22 13:11

Kalhan.Toress


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">
like image 38
Shane Rowatt Avatar answered Nov 07 '22 13:11

Shane Rowatt