我在angularJS中的dataTable分页

时间:2015-09-05 03:14:49

标签: javascript jquery angularjs

我的dataTable(angularJS)分页存在问题,这是我的代码:



app.js:

.controller("StudentCtrl", ["$scope", "$http", "filterFilter", "$rootScope", "logger", "$filter", "$log", function($scope, $http, filterFilter, $rootScope, logger, $filter, $log) {
                 var init;
               
               $scope.errors = [];
        $scope.msgs = [];
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];
$scope.currentPage = 1;

 
       $http({method: 'GET', url: 'myURL'})

         .success(function(data){
    $scope.posts = data; // response data 
    
      $scope.searchKeywords = "", $scope.filteredStores = [], $scope.row = "", $scope.select = function(page) {
                var end, start;
               return start = (page - 1) * $scope.numPerPage, end = start + $scope.numPerPage, $scope.currentPageStores = $scope.filteredStores.slice(start, end);
            }, $scope.onFilterChange = function() {
                return $scope.select(1), $scope.currentPage = 1, $scope.row = "";
                
            }, $scope.onNumPerPageChange = function() {
                //console.log("2");
               return $scope.select(1), $scope.currentPage =1 ;
            }, $scope.onOrderChange = function() {
                return $scope.select(1), $scope.currentPage;
            }, $scope.search = function() {
                return $scope.filteredStores = $filter("filter")(data, $scope.searchKeywords), $scope.onFilterChange();
            }, $scope.order = function(rowName) {
                return $scope.row !== rowName ? ($scope.row = rowName, $scope.filteredStores = $filter("orderBy")(data, rowName), $scope.onOrderChange()) : void 0;
            }, $scope.numPerPageOpt = [3, 5, 10, 20], $scope.numPerPage = $scope.numPerPageOpt[2], $scope.currentPage = 1, $scope.currentPageStores = [], (init = function() {
                return $scope.search(), $scope.select($scope.currentPage);
            })()
  
  
  }).error(function(data, status, headers, config) {
    
  });

students.html


<div class="page page-table" ng-controller="StudentCtrl">
    
<section class="table-dynamic">

<div class="bs-component" >

  <div   class="bs-example table-dynamic">



        <div class="table-filters">
            <div class="row">
                <div class="col-sm-4 col-xs-6">
                    <form>
                        <input type="text"
                               placeholder="search"
                               class="form-control"
                               ng-model="searchKeywords"
                               ng-keyup="search()" style="border-radius: 20px;">
                    </form>
                </div>
                <div class="col-sm-3 col-xs-6 filter-result-info">
                    <span>
                        Showing {{filteredStores.length}}/{{posts.length}} entries
                    </span>              
                </div>
            </div>
        </div>
         
        <table class="table table-bordered table-responsive table-hover">
            <thead>
              <tr>
            <th >Nom</th>
            <th >Prenom </th>
            <th >DropOut  </th>
            <th >Live </th>
             <th >Classe</th>
        </tr>
            </thead>
            <tbody>
                <tr ng-repeat="post in posts">
                <td align="center">{{post.LastName}}</td>
                <td align="center">{{post.FirstName}}</td>
                <td align="center">{{post.DropOut}}</td> 
                <td align="center">{{post.Live}}</td> 
                <td align="center">{{post.Class}}</td> 
            <footer class="table-footer">
            <div class="row">
                <div class="col-md-6 page-num-info">
                    <span>
                        Show 
                        <select data-ng-model="numPerPage"
                                data-ng-options="num for num in numPerPageOpt"
                                data-ng-change="onNumPerPageChange()">
                        </select> 
                        entries per page
                    </span>
                </div>
                <div class="col-md-6 text-right pagination-container">
                   
                    <pagination class="pagination-sm"
                                page="currentPage"
                                total-items="filteredStores.length"
                                max-size="4"
                                on-select-page="select(page)"
                                items-per-page="numPerPage"
                                rotate="true"
                                boundary-links="true"
                                ></pagination>
                

                </div>
                  
            </div>
        </footer>
           </div></div></section></div>                                           
&#13;
&#13;
&#13;

这是我从所有数据(8行)中选择5行的每个示例:

enter image description here

这是当我在第二页的分页器上cl​​ic :(我总是得到5个第一项而不是8行的其余部分)

enter image description here

那么如何在paginator中设置表行的信息呢? 非常感谢你的帮助

更新:jsfiddle代码:

https://jsfiddle.net/1982ybj6/

0 个答案:

没有答案