AngularJS datables

Question

I am new in AngularJS. I am facing a problem, my data is not being displayed in data table. Can anyone help me with this?

my code

HTML code

<div class="content table-responsive table-full-width">
<table id="myTable" class="table table-striped table-hover" datatable="">
    <thead>
        <th>Account ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Registered On</th>
        <!--<th>Settings</th>-->
        <th>Status</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td style="text-align:left;">{{user.account}}</td>
            <td style="text-align:left;">{{user.name}}</td>
            <td style="text-align:left;">{{user.email}}</td>

            <td style="text-align:left;" ng-model="dateVal">{{user.register}}</td>

            <td style="text-align:left;">

                <span class="label {{ user.status == 1 && 'label-success' || 'label-danger'}} " ng-click="updated(user.id)">
                                             {{ user.status == 1 && 'Active' || 'Inactive'}}
                                            </span>

            </td>

            <td>
                <a href="index.html#/edit_userpermission?id={{user.id}}" class="fa fa-cog" data-toggle="modal" data-target="#myModal"></a>
            </td>
        </tr>
    </tbody>
</table>

JS code

 /* User Listing */
  var url = UserService.url+'users.php?token='+localStorage.getItem("token");

  $http.get(url).success( function(data) 
  {

     $('#myTable').DataTable();

     if(data.login != null ){
       $location.path( "/logout" );      
     }
     $scope.users = data;

  });

am getting an output as...

When I click the sort option it displays "no data available in table"... Why do this happen? Waiting for a response. Thanks in advance

i referred the site " datatables.net " . I included two files are available on the DataTables CDN: — Pooja Krishna
– Pooja Krishna, Commented Jun 9, 2016 at 11:18

joseglego · Accepted Answer · 2016-06-09 16:10:17Z

1

take care.

0- You must define the datatable as ng. So, in your line:

<table id="myTable" class="table table-striped table-hover" datatable="">

You must change it to:

<table id="myTable" class="table table-striped table-hover" datatable="ng">

1- Take care about the numbers of data in each row. Because if is different number of. It will give you some problems.

2- Are you using the angular datatables? You must used with the jquery datatables. With both it will work.

You can check the this Plunkr: http://plnkr.co/edit/0lDhg9Mehn72E3rWAsLN?p=preview

Plus, you can check the documentation here: https://l-lin.github.io/angular-datatables/#/angularWay

edited Jun 9, 2016 at 16:10

answered Jun 9, 2016 at 16:01

joseglego

2,1091 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pooja Krishna Over a year ago

still i am not getting the output correctly. When i use "datatable" in my script, it does not display any thing. and it shows error......

joseglego Over a year ago

Did you check the plunkr? Did you add the datatable="ng"? Is another error or is the same? If it shows a new error can you share it?

Pooja Krishna Over a year ago

error 1: Uncaught Error: No module: datatables in angular.min.js

joseglego Over a year ago

Are you importing angular datatables??? You must add it in your index.html: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.4/angular-datatables.min.js"></script> and your app must include it in your app.js angular.module('myApp', ['datatables']);

Collectives™ on Stack Overflow

AngularJS datables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related