how to correct paging in angularjs

Question

i have below code , my page location 1 not showing data. its start from page 2 .. i don't know ...i am trying last 3 hours but not success i am new in angularjs that's why i am here please help me ...code is below ...

/HTML

 <table class="table table-hover" aria-describedby="dataTables-example_info" role="grid" class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example">
       <thead>
       <tr role="row">

   <th style="width: 360px;" colspan="1" rowspan="1">Class</th>
                                                    <th style="width: 360px;" colspan="1" rowspan="1">Section</th>
                                                    <th style="width: 260px;" colspan="1" rowspan="1">Edit Subjects</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="info in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
                                                   <td>{{info.class_name}}</td>
                                                    <td>{{info.section_name}}</td>                                                   

                                                   <td> <button ng-click="moreinformation(info)" type="button" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i></td>


                                                </tr>
                                            </tbody>
                                            </table>
                                            <ul class="pagination"> 
             <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
                            <a  ng-click="prevPage()">« Prev</a>
                        </li>
            <li  ng-repeat="n in range(totalItems)"
                            ng-class="{active: n == currentPage}"
                            ng-click="setPage()">
                         <a href ng-bind="n + 1"></a>
                        </li>

             <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
                            <a  ng-click="nextPage()">Next »</a>
                        </li>
       </ul>

//JS CODE...

 $scope.itemsPerPage =10;      
     $scope.currentPage = 0;
      $scope.totalItems = $scope.data.length / 10 ;
           $scope.data = [{ "class_name": "CLASS1", "section_name":"A" }, { "class_name": "CLASS2", "section_name": "A" }];
       $scope.prevPage = function () {
                            if ($scope.currentPage > 0) {
                                $scope.currentPage--;
                            }
                        };
                        $scope.nextPage = function () {
                            console.log($scope.totalItems);
                            if ($scope.currentPage < $scope.totalItems - 1) {
                                $scope.currentPage++;
                            }
                        };        
           $scope.setPage = function () {
                                console.log(this.n);
                                if (this.n == 0)
                                {
                                  //  this.n = 1;
                                    $scope.currentPage++;
                                }
                                else
                                {
                                    $scope.currentPage = this.n;
                                }

                            };

                            $scope.range = function (start, end) {
                                var ret = [];
                                if (!end) {
                                    end = start;
                                    start = 0;
                                }
                                for (var i = start; i < end; i++) {
                                    ret.push(i);
                                }

                                return ret;
                            };

Your ng-bind is n + 1

Anthony
– Anthony

2017-07-18 21:35:58 +00:00
Commented Jul 18, 2017 at 21:35 — Anthony
– Anthony, Commented Jul 18, 2017 at 21:35

Telman · Accepted Answer · 2017-07-18 22:37:18Z

1

this.n in your setPage function is always bound to the default value (like n), it doesn't care, that you set an n+1 as binding to the <a> element, this binding just affects the <a> element inner text.

So, to make this work, you can for example send a required value to your setPage handler, like this:

ng-click="setPage(n + 1)"

And in JS something like this:

$scope.setPage = function (n) {
    $scope.currentPage = n;
};

answered Jul 18, 2017 at 22:37

Telman

1,5071 gold badge9 silver badges12 bronze badges

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

2 Comments

Addi Khan Over a year ago

one more answer please... page is working fine but... ng-class="{active: n == currentPage}" shows your page 2 Highlighted .. but i am page one when i clicked page 2 its Highlighted page 3 ...

Telman Over a year ago

yes, of course you should update that expression as well, since your currentPage is actually is n+1, so for example it can be {active: (n+1) === currentPage}.

Collectives™ on Stack Overflow

how to correct paging in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related