Problem when doing paging in jQuery and Angular

Question

Problem when doing paging in jQuery and Angular

Navigation

#1 by (1 votes)

0

I'm setting up a paging and I have the following problem.

Firstly, my next and previous buttons are not working and shows no errors in 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 anyone 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 answer from my get coming from the API is as follows:

MyJS

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);
        });

    }; 
        });

javascript jquery angularjs

asked by anonymous 06.12.2017 / 14:31

1 answer

How to use base64 image in Angular 2? Error executing POST method

score 1 · Accepted Answer

Old man, you could not use UI Boostrap Pagination ? I think it would be much simpler. Here is 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>

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 navigating the paging buttons you will have the page numbering selected in the $ scope.currentPage, so just skip and take it if you use the LINQ expression.

I do not know if that's what you need, but it's a simple and very useful way to do paging and another option.