1

I'm using AngularJS with FooTable to show data in a table.

I have an issue when updating FooTable content.

This is when more than 10 Records For more than 10 records

This is when updating with no records. FooTable shows pagination enter image description here

When I click pagination (2), old records are showing enter image description here

This is when updating with less than 10 records. The pagination is gone now. enter image description here

My FooTable is,

<table class="table" data-paging="true" data-filtering="true" data-sorting="true"  data-state="true">
    <thead>
        <tr>
            <th data-breakpoints="xs">Session ID</th>
            <th data-breakpoints="xs">Date</th>
            <th data-breakpoints="xs">Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(index,session) in sessions" class="panel" repeat-end="onEnd()" data-expanded="true">
            <td>
                <span ng-if="session.sid">{{session.sid}}</span>
            </td>
            <td>
                <span  ng-if="session.sid">{{session.date}}</span>
            </td>
            <td>
                <span  ng-if="session.cost_to_interviewer">{{session.cost_to_interviewer}}</span>
            </td>
        </tr>
    </tbody>
</table>

First time I initialized FooTable as

FooTable.init('.table', {});

The response(in object form) stores $scope.sessions. Then AngularJS will display this content.

I tried to debug but failed. Can anyone help me?

Satish
  • 391
  • 4
  • 22
  • Hi, where you add the tag for the pager or Is it an inbuilt pager come along with code for the table. Can you please share that also? – Alexis Jun 12 '17 at 05:26
  • Hi @AlexisToby, thank you quick response. I'm sorry if I'm wrong, You mean 'data-paging="true" ' ?? I mentioned in the table only. And No code added except mentioned above. – Satish Jun 12 '17 at 06:37
  • Hi, No problems, can you please share the function code where you assign values to the **$scope.sessions**. We can add a validation there. – Alexis Jun 12 '17 at 06:41
  • This is code snippet: $http.get(baseAuth.getUrl(), {headers: headers}) .then(function(response){ $scope.sessions = response.data.sessions; $scope.totalScheduled = response.data.total_scheduled_count; $scope.totalSuccess = response.data.success_count; },function(response){ console.log("error while getting sessions details"); console.log(response); }); – Satish Jun 12 '17 at 06:45
  • Please find code here http://www.chopapp.com/#rglyjvan – Satish Jun 12 '17 at 06:51
  • Thank you for the code, in between I added an answer below, I hope it will help. – Alexis Jun 12 '17 at 06:54
  • @satish_srg if possible please share your full code. – Prashant Pokhriyal Jun 16 '17 at 16:39

1 Answers1

0

please assign a dynamic value to the data-paging attribute.

In controller, after assigning the value to $scope.sessions, please add the following code.

 if($scope.sessions.length>0){
  $scope.dataPager = true;
 }else{
  $scope.dataPager = false
 };

And assign this $scope.dataPager to data-paging attribute.

<table class="table" data-paging="dataPager" data-filtering="true" data-sorting="true" data-state="true">

Alexis
  • 816
  • 2
  • 11
  • 28
  • I understand this logic and tried. But it's not working and showing all results with no pagination. So more than 10 results also displayed in one shot. – Satish Jun 12 '17 at 07:23
  • Have you checked the value of $scope.dataPager is as expected as per the situation? – Alexis Jun 12 '17 at 07:34