gsk gsk - 1 month ago 19
AngularJS Question

Datatable with angularJs shows no data error?

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 ?

Answer

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

Comments