Динамическая AngularJs Bootstrap Datatable настраиваемая нумерация страниц, необходимая с помощью службы HTTP - PullRequest
Новая
       0

Динамическая AngularJs Bootstrap Datatable настраиваемая нумерация страниц, необходимая с помощью службы HTTP

0 голосов
/ 28 декабря 2018

Я сделал код отображения данных в таблицу данных с помощью сервиса HTTP GET.

Мне нужно сделать пользовательскую нумерацию страниц, показывая только 4 кнопки previous, 1, 2, next page.

Примечание: Когда пользователь находится на странице 1 нумерации страниц, должно отображаться previous, 1, 2, next page и если пользователь находится на странице2 он должен показывать previous, 2, 3, next page и одновременно так, если доступно любое количество данных.Если данные меньше 10, они должны отображать previous, 1, next page, а если они превышают 10, они должны следовать вышеуказанным шагам.

Угловой код JS: 

<script>
    (function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
    controller('simpleCtrl', function($scope, $http) {
        $http.get("https://jsonplaceholder.typicode.com/users")
        .then(function(response) {
            $scope.persons = response.data;
        });
    });
})(angular);
</script>

HTML-код для отображения таблицы данных: 

<table datatable="ng" class="table table-bordered table-striped">
   <thead>
        <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Username</th>
           <th>Email</th>
           <th>Phone</th>                     
        </tr>
   </thead>
   <tbody>
         <tr dt-rows ng-repeat="person in persons">
              <td>{{ $index+1 }}</td>
              <td>{{ person.name }}</td>
              <td>{{ person.username }}</td>
              <td>{{ person.email }}</td>
              <td>{{ person.phone }}</td>                       
         </tr>
   </tbody>
</table>

enter image description here

1 Ответ

0 голосов
/ 29 декабря 2018

просто используйте

нг-если

или

нг-шоу

ипризнак условного отображения второй пронумерованной кнопки, а также привязки пронумерованной внутренней части кнопки к переменным.

обновлен с помощью подкачки на стороне клиента 

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   <body ng-app="app" style="padding: 10px">
      <div ng-controller="myctrl">
      <h1>test pager</h1>
      <table datatable="ng" class="table table-bordered table-striped">
         <thead>
            <tr>
               <th>Id</th>
               <th>UserId</th>
               <th>Title</th>
               <th>Completed</th>
            </tr>
         </thead>
         <tbody>
            <tr dt-rows ng-repeat="todo in pagedTodos">
               <td>{{ todo.id }}</td>
               <td>{{ todo.userId }}</td>
               <td>{{ todo.title }}</td>
               <td>{{ todo.completed }}</td>
            </tr>
         </tbody>
      </table>
      <div> 
         <button class="btn btn-default" ng-click="goPage(lower-1)"><span>previous</span></button>
         <button class="btn btn-info" ng-click="goPage(lower)"><span>{{lower}}</span></button>
         <button ng-if="showUpper" class="btn btn-default" ng-click="goPage(upper)"><span>{{upper}}</span><span></span></button>
         <button class="btn btn-default" ng-click="goPage(upper)"><span>next page</span></button>
      </div>
      <script>
         var app = angular.module("app",[]);
            app.controller("myctrl",["$scope", "$http", function($scope, $http){
            
            	var pageCount  = 1;
                var currentPage = 1;
                var pageSize = 10;
                
            	$scope.lower = 1;
                $scope.upper = 2;
                $scope.showUpper = false;
                
                $scope.pagedTodos = [];
                var allTodos = [];
                
                $http.get("https://jsonplaceholder.typicode.com/todos")
                      .then(function(response) {
                          allTodos = response.data;
                          pageCount = Math.ceil(allTodos.length / pageSize);
                          $scope.goPage(1);
                      });
                
                $scope.goPage = function(page){
               		 	$scope.pagedTodos = allTodos.slice((page -1) * pageSize , page * pageSize);
                	updatePagerStatus(page);
                }
               
                
                var updatePagerStatus = function(pNewPage){
                	currentPage =  pNewPage;
                    $scope.showUpper = pageCount > 1;
                	$scope.lower = currentPage;
                    $scope.upper = currentPage + 1;
                }
                
            }]);
      </script>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...