Datatable with angularJs shows no data error?

Question

I want to use datatable in angularjs. I have written directives and data table initializing and displaying rows in table first time. When searching or filtering,it shows no data in table error message.

Directive code is

"use strict";
invoiceApp.directive('itemTable', function () {
return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/item/item_table.html',
        link: function (scope, table) {
            table.dataTable();

        }
    }
})

Template is,

<table my-table id="dt_basic" class="table table-bordered table-hover" width="100%">
<thead>                         
    <tr>
        <th class="text-center" width="10">
            <input type="checkbox" name="checkbox-inline" id="slt_all">
        </th>
        <th data-class="expand">Name</th>
        <th data-hide="phone">Description</th>
        <th data-hide="phone">Unit</th>
        <th>Rate</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in items">
        <td class="text-center"><input type="checkbox" checked="checked" name="checkbox-inline"></td>
        <td>{{item.name}}</td>
        <td>{{item.description}}</td>
        <td>{{item.unit}}</td>
        <td>AED {{item.rate}}</td>
    </tr>

Controller is,

    'use strict';
    invoiceApp.controller('itemController', ['$scope', 'ItemService', function ($scope, ItemService) {
$scope.items = //datas
        }]);

enter image description here Why it happening ?

thats weird, I faced similar problem, better use this angular Datatable l-lin.github.io/angular-datatables/#/withAjax — ramamoorthy_villi
– ramamoorthy_villi, Commented Mar 5, 2015 at 9:35

ramamoorthy_villi · Accepted Answer · 2015-03-05 10:06:03Z

1

Instead of creating new directive, simply add datatable=" using this angular datatable module

HTML:

<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>

JS :

angular.module('showcase', ['datatables']);

More detail AngularJs Datatable and Download

edited Mar 5, 2015 at 10:06

answered Mar 5, 2015 at 9:40

ramamoorthy_villi

2,0631 gold badge18 silver badges44 bronze badges

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

3 Comments

gsk Over a year ago

var invoiceApp = angular.module('invoiceApp', ['ngRoute','datatables']);when I am declaring datatables,I getting angular error.which is Error: [$injector:modulerr] .....

ramamoorthy_villi Over a year ago

you downloaded that file and included ?

gsk Over a year ago

Yes, problem with file.Now datatable working fine for static table.But when I am trying to load data from controller via service,it shows same error.

Jaskaran Singh · Accepted Answer · 2016-10-16 10:32:32Z

1

Use "ng" inside your datatables="" directive.. Like this: datatables="ng" click here to see an example This solves the problem in my case as i am using ng repeat to show the data in the table

answered Oct 16, 2016 at 10:32

Jaskaran Singh

9248 silver badges8 bronze badges

Collectives™ on Stack Overflow

Datatable with angularJs shows no data error?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related