Problem when paging in jQuery and Angular

Question

I am putting together a pagination and I have the following problem.

First my next and previous buttons are not working and shows no error on the console.

The second question is that when I select in the combo box, the value of items per page it brings the items of the selected value in the combo but the strange thing is that it changes the label that would show the page Page 3 of 1 Page 4 of 1 and so on.

Can someone help me ?

my html

<div >

    <div class=" jPager"> 

            <div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left">
                    <select onchange="carregarDistritos()" id="idSelecionaSize" class="form-control" data-pager-action='pagesize'>
                            <option value="5">Ver 5</option>
                            <option value="15">Ver 15</option>
                            <option value="20">Ver 20</option>
                            <option value="25">Ver 25</option>
                            <option value="50">Ver 50</option>
                            <option value="100">Ver 100</option>
                    </select>
                </div>

            <div class="input-group   col-lg-6  col-md-6  col-sm-6 col-xs-12">
                        <button  class="btn btn-default id="anterior" >&lsaquo; Anterior</button>
                                <span id="numeracao"></span>
                        <button  class="btn btn-default id="proximo" >Próximo &rsaquo;</button>
                            </div>


                        </div>

                    </div>          

The response of my get coming from the API is as follows:

my JS

app.controller("buscaDistritoController", function($scope,  $http, $location) {



    $scope.distritos = [];
    $scope.distrito = {}; // binding com o form

    carregarDistritos = function() {
        token = localStorage.getItem("userToken");

        var e = document.getElementById("idSelecionaSize");
        var size = e.options[e.selectedIndex].value;


        var page=0;

        var search = $location.search();
        var page = search.page||page;
        var size = search.size||size;
        var sort = search.sort||'type,desc';


        $http({
             method: 'GET',
             url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
        }).then(function(response) {
            $scope.distritos = response.data.content;
            $scope.number= response.data.number;
            $scope.page = response.data.totalPages;
            $scope.sort = sort;


            paginar = function() {
                $('table > tbody > tr').remove();
                var tbody = $('table > tbody');
                for (var i = $scope.page * size; i < $scope.distritos.length && i < ($scope.page + 1) *  size; i++) {
                    tbody.append(
                        $('<tr>')
                            .append($('<td>').append(dados[i][0]))
                            .append($('<td>').append(dados[i][1]))
                    )
                }
                $('#numeracao').text('Página ' + ($scope.page + 1) + ' de ' + Math.ceil($scope.distritos.length / size));
            }

            ajustarBotoes = function() {
                $('#proximo').prop('disabled', $scope.distritos.length <= size || $scope.page >= Math.ceil($scope.distritos.length / size) - 1);
                $('#anterior').prop('disabled', $scope.distritos.length <= size || $scope.page == 0);
            }

            $(function() {
                $('#proximo').click(function() {
                    if (size < $scope.distritos.length / size - 1) {
                        $scope.page++;
                        paginar();
                        ajustarBotoes();
                    }
                });
                $('#anterior').click(function() {
                    if ($scope.page > 0) {
                        $scope.page--;
                        paginar();
                        ajustarBotoes();
                    }
                });
                paginar();
                ajustarBotoes();
            });


        }, function(response) {
            console.log(response.data);
            console.log(response.status);
        });

    }; 
        }); 

Answer 1

Old man, you couldn’t use the UI Boostrap Pagination? I believe it would be much simpler. Follow an example:

<ul uib-pagination total-items="totalItems" ng-model="currentPage" max-size="5"class="pagination-sm" boundary-links="true" num-pages="numPages" ng-change="pageChanged()" first-text="Primeiro" last-text="Último" next-text="Próximo" previous-text="Anterior"></ul>

In your js would look like this:

$scope.currentPage = 1;
$scope.pageChanged = function () {        
    $http.post('carregarDistritos', { skip: $scope.currentPage })
        .then(function success(response) {                
            $scope.totalItems = response.data.total;
            $scope.distritos = response.data.listDistritos                                
        }, function error(response) {
    alert('Ops! Um erro aconteceu ao buscar os dados.')});
} 

When browsing the pagination buttons you will have the page numbering selected in $Scope.currentPage, so just do Skip and take if you use LINQ expression.

I don’t know if it’s what you need, but it’s a simple and very useful way to make paging and another option.