如何纠正angularjs中的分页

时间:2017-07-18 21:26:23

标签: javascript angularjs angularjs-ng-repeat angular-ui-bootstrap

我有以下代码,我的页面位置1没有显示数据。它从第2页开始..我不知道...我正在尝试最近3个小时但没有成功我是angularjs的新手,这就是为什么我在这里请帮助我...代码在下面......

/ 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;
                            };

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

this.n函数中的

setPage始终绑定到默认值(如n),它并不关心您将n+1设置为绑定到<a>元素,此绑定仅影响<a>元素内部文本。

因此,为了使这项工作,您可以例如向setPage处理程序发送所需的值,如下所示:

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

在JS中就像这样:

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