Dynamic AngularJs Bootstrap Datatable custom pagination Needed using HTTP Service

Question

I have made the code the display the data into the data-table with the help of HTTP GET Service.

I need to make custom pagination showing only 4 buttons previous, 1, 2, next page.

Note: When user is on page 1 of pagination it should show previous, 1, 2, next page and if the user is on page 2 it should show previous, 2, 3, next page and simultaneously like that if any number of data available. If the data is less than 10 only it should display previous, 1, next page and if it exceeds more than 10 it has to follow the above said steps.

Angular JS Code:

<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 Code to display the Data-table:

<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>

if you share the code for the pagination you have implemented (in the image), we can try doing the 4 button change — Akber Iqbal, Dec 29 '18 at 03:24
The script what i have used has been shown in the question itself. Now the data is 10 So it shows only one page. If the count goes beyond 30 it will show all the pages. But i need it as i have suggested. — Naresh Kumar P, Dec 29 '18 at 04:32
I have added all the codes to the my github also: https://github.com/Nareshkumar979/Dynamic-Angular-Bootstrap-Datatable-Using-HTTP-Service-Methods — Naresh Kumar P, Dec 29 '18 at 04:37

hvojdani · Answer 1 · 2018-12-29T16:11:40.210

just use

ng-if

or

ng-show

and a flag for conditional display of second numbered button, also bind numbered button's inside to variables.

updated it with client side paging

<!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>

Thanks for the answer:) I need to control the pagination which is automatically generated from the data-table. That means i have to cancel the pagination which is default by the angular data-table. Could you please make up the data table for this URL using HTTP Service: https://jsonplaceholder.typicode.com/todos — Naresh Kumar P, Dec 29 '18 at 11:07
You could see that in my image screenshot attached. I need it there. I hope so you are to the point. — Naresh Kumar P, Dec 29 '18 at 11:12
In you sample output when i click on 2 it should show page 2 & 3 and it must go on simultaneously. Can you do it with the URL what i have shared with you. — Naresh Kumar P, Dec 29 '18 at 11:13

Dynamic AngularJs Bootstrap Datatable custom pagination Needed using HTTP Service

1 Answers1