Разбиение страницы в угловой js

Я получаю данные из базы данных через HTTP-почтовый вызов и визуализацию таблицы. Ну, код реализации выглядит отлично, но разбиение на страницы, похоже, не работает.Разбиение страницы в угловой js

Я реализовал его в соответствии с моим требованием, и я получаю ответ, который я могу видеть на консоли хром. Что может быть неправильным с разбиением на страницы, поскольку я не могу видеть кнопки разбиения на страницы.

Вот код:

<!doctype html> 
    <html lang="en" ng-app="myApp"> 
     <head> 
      <meta charset="utf-8"> 
      <base href="/"> 
      <title>The Single Page Blogger</title> 
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
      <script data-require="[email protected]*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script> 
      <script src="<%=request.getContextPath()%>/js/module.js"></script> 
      <link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" /> 
      <script> 

       //Get table from Server and do pagination 
       app.controller("tableController", function ($scope, $http) { 
        $scope.filteredTodos = [] 
          , $scope.currentPage = 1 
          , $scope.numPerPage = 10 
          , $scope.maxSize = 5; 

        $scope.getTable = function() { 
         $scope.customerTable = []; 

         $http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data) 
         { 
          $scope.customerTable = data; 
         }); 
        }; 
        $scope.getTable(); 

        $scope.$watch("currentPage + numPerPage", function() { 
         var begin = (($scope.currentPage - 1) * $scope.numPerPage) 
           , end = begin + $scope.numPerPage; 

         $scope.filteredTodos = $scope.customerTable.slice(begin, end); 
        }); 
       }); 

      </script> 
     </head> 
     <body> 
      <div class="container" id="main"><br/><br/> 
       Search: <input type="text" ng-model="search" placeholder="Search"> 
       <div ng-controller="tableController"> 
        <table class="table table-striped table-hover table-bordered"> 
         <tr> 
          <th style="font-size: 13.3px">Card number</th> 
          <th style="font-size: 13.3px">First name</th> 
          <th style="font-size: 13.3px">Opening balance</th> 
          <th style="font-size: 13.3px">Withdrawal</th> 
          <th style="font-size: 13.3px">Deposit</th> 
          <th style="font-size: 13.3px">Closing balance</th> 
          <th style="font-size: 13.3px">Tx date</th> 
          <th style="font-size: 13.3px">Usage type</th> 
         </tr> 
         <tr ng-repeat="data in customerTable| filter: search"> 
          <td>{{data.CARD_NUMBER}}</td> 
          <td>{{data.FIRST_NAME}}</td> 
          <td>{{data.OPENING_BALANCE}}</td> 
          <td>{{data.WITHDRAWAL}}</td> 
          <td>{{data.DEPOSIT}}</td> 
          <td>{{data.CLOSING_BAL}}</td> 
          <td>{{data.TXDATE}}</td> 
          <td>{{data.USAGE_TYPE}}</td> 
         </tr> 
        </table> 
        <pagination 
         ng-model="currentPage" 
         total-items="customerTable.length" 
         max-size="maxSize" 
         boundary-links="true"> 
        </pagination> 
        <br/><br/><br> 
        </form> 
       </div> 
      </div> 
     </body> 
    </html>

Вот plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview

Модуль:

var app = angular.module('myApp', ['ui.bootstrap']);

источник

2015-06-29 kittu

Я могу видеть разбиение на страницы, и все работает нормально –

Да, он не работает с моим кодом. Плункер - это просто демо-версия – kittu

У вас есть '['ui.bootstrap']', определяемый как введенная зависимость? Как и в случае: var app = angular.module ('app', ['ui.bootstrap']); '?? –

Попробуйте это,

   <tr ng-repeat="data in filteredTodos| filter: search"> 
          <td>{{data.CARD_NUMBER}}</td> 
          <td>{{data.FIRST_NAME}}</td> 
          <td>{{data.OPENING_BALANCE}}</td> 
          <td>{{data.WITHDRAWAL}}</td> 
          <td>{{data.DEPOSIT}}</td> 
          <td>{{data.CLOSING_BAL}}</td> 
          <td>{{data.TXDATE}}</td> 
          <td>{{data.USAGE_TYPE}}</td> 
         </tr>

Вы должны быть итерация filteredTodos вместо customerTable

источник

2015-06-29 17:58:33

Невозможно получить данные ответа при просмотре, когда я использую filterTodos. – kittu

. Я могу видеть ответ в консоли хром, но с использованием таблицы filtersTodos пусто. – kittu

Вы должны выполнять итерацию только с фильтрованнымTodos, так как это должно быть .. Однако добавьте 'console.log (data)' после '$ scope.customerTable = data;' внутри '$ http.get()' вызов и общий доступ что пожалуйста –

Разбиение страницы в угловой js

ответ

Смежные вопросы