-1

I display number of table item on a web page, something like: 20/67, where "20" is the current items on the page and "67" the total number of objects in the array.

HTML

<tr ng-repeat="mydata in data | startFrom:(currentPage - 1) * pageSize | linitTo: pageSize">
            <td>{{ $index + serial }}</td>
            <td>{{mydata.name}}</td>
            <td>{{mydata.age}}</td> 
<tr>  

<div class="pagenumber">
            <strong><p>Page info: {{ pageSize }}/{{ data.length }}</p></strong>
</div>

Controller

$scope.data = data;
    $scope.form = {};
    $scope.pageSize = 20;
    $scope.currentPage = 1;
    $scope.serial = 1; 
    $scope.$watch('currentPage', function() {
            $scope.serial = $scope.currentPage * $scope.pageSize
                    - ($scope.pageSize - 1);
        });

Since my total items are 67, them I'm having 20, 20, 20, 7 items per page.

Going by my HTML code, the "pageSize" will always give 20 which was the size specified in the controller.

How can I fix the code so that I get e.g 7/67 for the last page. As in, counting the number of items on every page?

Addey
  • 123
  • 11
  • How the table "knows" to display 7 items in the last page? Which code does that? – Mosh Feu Aug 13 '19 at 09:04
  • That was my question, I don't want to use "pageSize" in my HTML bcs it will always display 20. – Addey Aug 13 '19 at 09:09
  • I understand but your table / list "knows" to display only 7 items in the last page or not? Can you show the html code of the table / list? – Mosh Feu Aug 13 '19 at 09:14
  • I want to display the number under the table..... Right now im getting 20/67 even if the table items are 7 – Addey Aug 13 '19 at 09:19
  • Addey, I get it. Let me ask this in a different way. Are you using some plugin to generate the table or you're doing it by yourself? Can you show the code of the table? I'm asking because maybe there is an easy way to get that data from the table functionality. – Mosh Feu Aug 13 '19 at 09:24
  • @Mosh Feu, that was my code. I used "serial" in the controller for page numbering. I just need help with displaying the actual number of items below the table, either its 20 or less. – Addey Aug 13 '19 at 11:29
  • Now, with the html is much more clear :) I think that this is the exact same question: https://stackoverflow.com/a/19517533/863110 – Mosh Feu Aug 13 '19 at 14:44

1 Answers1

1

Try this:

controller:

    $scope.$watch('currentPage', function () {
        if ($scope.currentPage * $scope.pageSize < data.length) {
            $scope.currentPageSize = $scope.pageSize;
        }
        else {
            $scope.currentPageSize = data.length % $scope.pageSize
        }
    }

html:

<div class="pagenumber">
        <strong><p>Page info: {{currentPageSize}}/{{ data.length }}</p></strong>
</div>
Miri Gold
  • 370
  • 1
  • 9
  • What is the value of $scope.currentPageSize Right now? – Miri Gold Aug 13 '19 at 09:30
  • Addey, `doesn't work` means nothing.. What it does show? Is this throw an error?? – Mosh Feu Aug 13 '19 at 09:31
  • @MoshFeu, My idea is to calculate the number of values on the current page, by the total. How he knows the total doesn't matter. – Miri Gold Aug 13 '19 at 09:38
  • @MiriGold sorry, my question was to Addey. Your calculation is right – Mosh Feu Aug 13 '19 at 09:55
  • @Addey, doesn't work means nothing.. What it does show? Is this throw an error??Do you mean that the number of `currentPageSize` or the table still have all the rows instead of respecting the page size and present top 20? – Mosh Feu Aug 13 '19 at 09:56
  • @MiriGold, see I used "$scope.serial" to start the table index number from 1 and not 0. When I used ur solutions, the current page displayed 0/67 and the other pages displayed just 17/67. That was why I said it was not working. Do you have a better solution ?? – Addey Aug 13 '19 at 11:35
  • Sorry. The solution I wrote is just for calculating the last page. I fixed it. try now. – Miri Gold Aug 14 '19 at 10:33