title: Pagination with JS how to implements
body: <p>I want to implement a paging, using Jquery or angular in my application but I'm not sure how ... I'm getting the back end of it .. </p>
  
  <p><a href="https://i.stack.imgur.com/3nuBL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nuBL.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/yX3Dv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yX3Dv.jpg" alt="enter image description here"></a></p>
  
  <p>my inforation is alredy filter by API i using this method </p>
  
  <pre><code>@RequestMapping( value = "/distritosPaginacao",  params = { "page", "size" },  method = RequestMethod.GET)
       public Page&lt;Distritos&gt; findPaginated( @RequestParam("page") int page, @RequestParam("size") int size) {             
      Page&lt;Distritos&gt; resultPage = distritosService.paginacao(page, size);
  
                  return resultPage;
              }
  </code></pre>
  
  <p>and in my js i have this ...</p>
  
  <pre><code>app.controller("buscaDistritoController", function($scope,  $http, $location) {
  
  
  
      $scope.distritos = [];
      $scope.distrito = {}; // binding com o form
  
  
      carregarDistritos = function() {
  
          token = localStorage.getItem("userToken");
  
          var search = $location.search();
          var page = search.page||0;
          var size = search.size||15;
          var sort = search.sort||'type,desc';
  
  
          $http({
               method: 'GET',
               url: '/user/distritosPaginacao?page=' + page + '&amp;size=' + size + '&amp;sort=' + sort
          }).then(function(response) {
              $scope.distritos = response.data.content;
              $scope.page = response.data.totalPages;
              $scope.sort = sort;
  
          }, function(response) {
              console.log(response.data);
              console.log(response.status);
          });
  
  
      };
      });
  </code></pre>
  
  <p>my html </p>
  
  <pre><code>&lt;div ng-controller="buscaDistritoController"&gt;
      &lt;div class="container"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="panel panel-primary"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;h3&gt;Distritos&lt;/h3&gt;
                      &lt;br&gt;&lt;/br&gt;
                      &lt;button id="btnSalvar" type="button" data-toggle="modal" data-target="#modalAdicionarDistrito" class="btn btn-default "&gt;Adicionar novo distrito&lt;/button&gt;
                      &lt;button id="btnImprimir" type="button"  class="btn btn-default pull-right "&gt;Imprimir&lt;/button&gt;
  
                      &lt;div &gt;
  
                              &lt;div class=" jPager"&gt; 
  
                                          &lt;div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left"&gt;
                                                      &lt;select class="form-control" data-pager-action='pagesize'&gt;
                                                      &lt;option value="5"&gt;Ver 5&lt;/option&gt;
                                                              &lt;option value="15"&gt;Ver 15&lt;/option&gt;
                                                              &lt;option value="20"&gt;Ver 20&lt;/option&gt;
                                                              &lt;option value="25"&gt;Ver 25&lt;/option&gt;
                                                              &lt;option value="50"&gt;Ver 50&lt;/option&gt;
                                                              &lt;option value="100"&gt;Ver 100&lt;/option&gt;
                                                  &lt;/select&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="input-group   col-lg-6  col-md-6  col-sm-6 col-xs-12"&gt; 
                                               &lt;span class="input-group-addon btn btn-primary" data-pager-action='first'&gt;&lt;i class="fa fa-angle-left"&gt;&lt;/i&gt; Primeira&lt;/span&gt;
                                               &lt;span class="input-group-addon btn btn-primary" data-pager-action='previous'&gt;&lt;i class="fa fa-angle-double-left"&gt;&lt;/i&gt; Anterior&lt;/span&gt;
                                              &lt;input type="text" class="form-control" data-pager-action='pagenum'&gt;
                                              &lt;span class="input-group-addon btn btn-primary" data-pager-action='next'&gt;&lt;i class="fa  fa-angle-double-right"&gt;&lt;/i&gt; Próxima&lt;/span&gt;
                                              &lt;span class="input-group-addon btn btn-primary" data-pager-action='last'&gt;&lt;i class="fa  fa-angle-right"&gt;&lt;/i&gt; Última&lt;/span&gt;
                                          &lt;/div&gt;
  
                          &lt;/div&gt;                                                              
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;table id="idTabela" class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Id&lt;/th&gt;
                                      &lt;th&gt;Nome&lt;/th&gt;
                                      &lt;th&gt;Código DNE&lt;/th&gt;
                                      &lt;th&gt;Opções&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody ng-repeat="dis in distritos "&gt;
                                  &lt;tr&gt;                            
                                      &lt;td&gt;{{dis.idDistrito}}&lt;/td&gt;
                                      &lt;td&gt;{{dis.nome}}&lt;/td&gt;
                                      &lt;td&gt;{{dis.codigoDne}}&lt;/td&gt;
  
                                      &lt;td&gt;                                
                                           &lt;div  class="btn-group"&gt;
                                              &lt;button id="opcoes" type="button" class="btn btn-danger vermDigifred btn-xs dropdown-toggle glyphicon glyphicon-pencil" data-toggle="dropdown"&gt; &lt;/button&gt;                                                                                   
                                              &lt;ul class="dropdown-menu" role="menu"&gt;
                                                  &lt;li&gt;&lt;a  id="btnExcluirRegistro" ng-click="excluirDistritos(dis)"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Excluir registro&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt; &lt;a id="btnAlterarRegistro" data-toggle="modal" data-target="#modalAlterarDistrito" ng-click="alterarDistritos(dis)" &gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Alterar registro&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/div&gt; 
  
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have no idea how to implement the next and return buttons and also the buttons see results by pages. </p>
  
  <p>can anybody help me? I'm not very experienced. </p>