Showing "No data available in table" on sorting and searching data

Question

Below is my table's html code -

<table id="srchTable" style="width:100%; font-size:0.85em;"">
 <thead>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>Salary</th>
   </tr>
 </thead>
 <tr ng-repeat="jsonSearchData in searchData">
   <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
   <td>{{jsonSearchData.Age}}</td>
   <td>{{jsonSearchData.Salary}}</td>
 </tr>
</table>

This is js code for table -

$('#srchTable').dataTable();

I am populating table from json result. Below is the json -

[{  
      "Name":"Sam",
      "Age":"25",
      "Salary":"$25000"
 },
 {
      "Name":"Phillip",
      "Age":"25",
      "Salary":"$30000"
 }]

Now when I am clicking on sort icons table is showing No data available in table message. And same thing is happeing when I am trying to search in data table.
I tried below code but it didn't worked.

$('#srchTable').dataTable({
  "ordering":true,
  "searching": true
});

Please help.

I think, that code `$('#srchTable').dataTable()` run before the angular render table. Please try `setTimeout(function() { $('#srchTable').dataTable() }, 1000);` for test, and say me if it work — LinnTroll, Dec 28 '15 at 08:10
so looking at this question, after making some comments on the other question you posted, I can see that you already tried to ask about the problem. What I am seeing here and in your other question is a common theme, you are trying to think of Angular.js in the same way you might think of jQuery, even though they accomplish things ***very differently***. **DON'T** use jQuery with angular unless you are designing new functionality. This is a good read: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542?s=2|0.8371#15012542 — Claies, Jan 12 '16 at 06:00

score 1 · Answer 1 · answered Dec 28 '15 at 09:07

1

In this case jquery is executed before angular render the data .
You don't need to use jquery here. Angular provides filters and sorting options .

example :

  <input type="search" ng-model="query">
    <table id="srchTable" style="width:100%; font-size:0.85em;"">
     <thead>
       <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>
       </tr>
     </thead>
     <tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'">
       <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}   </a></td>
       <td>{{jsonSearchData.Age}}</td>
       <td>{{jsonSearchData.Salary}}</td>
     </tr>
    </table>

answered Dec 28 '15 at 09:07

Vittal Das

69
8

Your solution is working, but it is sorting name when first table is loaded. As i click on sort icons its showing me `No data available in table`. – mailmehere Dec 28 '15 at 09:19
Don't use any jquery here. Angular is automatically sorting the data based on name. – Vittal Das Dec 28 '15 at 09:24
Follow angularjs docs for more sorting options : https://docs.angularjs.org/api/ng/filter/orderBy – Vittal Das Dec 28 '15 at 09:27
I tried order by, but the default sorting that is enabled on data table is not working. – mailmehere Dec 30 '15 at 06:39

score 0 · Answer 2 · answered Feb 04 '16 at 20:52

Be sure to wrap your data rows in <tbody></tbody>.

        <table id="srchTable" style="width:100%; font-size:0.85em;"">
     <thead>
       <tr>
         <th>Name</th>
         <th>Age</th>
         <th>Salary</th>
       </tr>
     </thead>

<tbody><!-- start after </thead> Be sure not to include in loop -->

     <tr ng-repeat="jsonSearchData in searchData">
       <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
       <td>{{jsonSearchData.Age}}</td>
       <td>{{jsonSearchData.Salary}}</td>
     </tr>

</tbody><!-- end after loop -->

</table>

Showing "No data available in table" on sorting and searching data

2 Answers2