Paging with Angularjs and Webapi

Asked

Viewed 738 times

0

I need to make a pagination using AngularJS. Well, I made a controller for a popular one Table HTML. This is now working. My next step is to page this table. I picked up an example on the internet, only that the example the guy makes is 1 until 1000 and leaves paying. In my case is different, I get a JSON of my REST and I need to page this, separate it into block 10, as I get 40 serialized records, would give 4 pages of 10. I made a controller.js just for this, it’s right, to separate well. Each case a case. Below my controller:

var pagina = angular.module('app', []);

pagina.controller("PaginacaoController", function ($scope) {
    $scope.filteredTodos = []
   , $scope.currentPage = 1
   , $scope.numPerPage = 10
   , $scope.maxSize = 5;

    $scope.makePagina = function () {
        $scope.pagina = [];
        for (i = 1; i <= 1000; i++) {
            $scope.pagina.push({ text: "Teste " + i, done: false });
        }
    };

    $scope.makePagina();

    $scope.$watch("currentPage + numPerPage", function () {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;

        $scope.filteredPagina = $scope.pagina.slice(begin, end);
    });

})

I have two doubts there:

1) In the second Function() of for, I think I should put a date and pick up the date.items(that way I get the JSON to popular the table), but data.items.length, no funfa, with me gave error.

2) See that $scope.numPerPage is fixed at 10, but in this case I don’t know how many records come and the pagination should be dynamic.

Below my view, which today works to popular the table:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Tipo Contato Operadora</h2>

<div data-ng-controller="TipoContatoOperadoraController">
    <div class="panel panel-default">
        <div class="panel-heading">Lista de Tipo de Contato das Operadoras</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                        <strong>{{erro}}</strong>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tr>
                                    <th>Cod. Tipo Contato</th>
                                    <th>Nome Tipo Contato</th>
                                    <th>Ind. Tipo Contato</th>
                                    <th>Data Atualização</th>
                                    <th>Cod. Usuário</th>
                                </tr>
                                <tr data-ng-repeat="lista in listaTipoContatoOperadora">
                                    <td>{{ lista.id }}</td>
                                    <td>{{ lista.nome }}</td>
                                    <td>{{ lista.tipoContato }}</td>
                                    <td>{{ lista.dataUltimaAtualizacao }}</td>
                                    <td>{{ lista.loginUltimaAtualizacao }}</td>
                                </tr>
                            </table>
                        </div>                    
                </div>
            </div>
        </div>
    </div>
</div>

EDITION 1

If I put two controller, my view is lost. The current Controller to receive the JSON that’s the one:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {

    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.listaTipoContatoOperadora = data.items;
        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

Is there any way to make paging in this controller? Okay.

ISSUE 2

It was like this my controller and still not page:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {

    $scope.filteredTodos = []
   , $scope.currentPage = 1
   , $scope.numPerPage = 10
   , $scope.maxSize = 5;

    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.listaTipoContatoOperadora = data.items;

            $scope.makePagina = function (data) {
                $scope.pagina = [];
                for (i = 1; i <= data.items.lehgth; i++) {
                    $scope.msg = "Teste " + i;
                    $scope.pagina.push({ text: "Teste " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.pagina.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

ISSUE 3

I made this change and it worked. What was missing was Angularjs-UI and CSS or Bootstrap, build the navigation of the pages, but it worked.

$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.filteredTodos = []
              , $scope.currentPage = 1
              , $scope.maxSize = 5
              , $scope.numPerPage = data.items.length / $scope.maxSize;

            $scope.listaTipoContatoOperadora = data.items;
            var t = data.items.length;
            console.log(t);

            $scope.makePagina = function () {
                $scope.pagina = [];
                for (i = 1; i <= data.items.length; i++) {
                    $scope.pagina.push({ text: "Página " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.pagina.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

ISSUE 4

I was able to make the Slice with this code. I’m just not able to bring the navigation buttons between the pages:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {



    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.filteredPagina = []
              , $scope.currentPage = 1
              , $scope.maxSize = 5
              , $scope.numPerPage = data.items.length / $scope.maxSize;

            $scope.listaTipoContatoOperadora = data.items;

            $scope.makePagina = function () {
                $scope.app = [];
                for (i = 1; i <= data.items.length; i++) {
                    $scope.app.push({ text: "Página " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

And my view (only the TD’s) was like this:

<tr data-ng-repeat="lista in filteredPagina">
    <td>{{ lista.id }}</td>
    <td>{{ lista.nome }}</td>
    <td>{{ lista.tipoContato }}</td>
    <td>{{ lista.dataUltimaAtualizacao }}</td>
    <td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>

I just changed the foreach to the filtered page(s) (s)

javascript html asp.net-mvc angularjs asp.net-web-api

  • For this to be "right" you have to paginate the data in your query with the bank

  • @Diegoaugusto, the AngularJS does not make a Slice of the JSON?

  • What error do you get in date.items.length?

  • Now there was no error, but nothing happens. I made two controllers and the system is not allowing it. When I put two controllers, I get stuck, I don’t go up the JSON. I remove the paging controller there funfa.

  • @pnet Faz, but you won’t gain anything in terms of performance, because if you have a table in the bank with many records the query will take the same way

  • I understood, at the moment it is more learning even. Until last week I didn’t even know what Angulajs was. I’d like to do one way, learn and then yes, see other ways and learn.

  • I put the pagination inside the json controller and it gives me this error: angular.js:13708TypeError: Cannot read property 'items' of undefined&#xA; at m.$scope.makePagina (TipoContatoOperadoraController.js:20)

  • It worked what I mean is to show the texts of the pages, but I still have a lot of work to do. But do another post now for the JSON Bible.

  • @pnet, try to keep your questions more atomic, if your initial doubt was about how to divide the data on the screen, but if in solving this problem appeared a problem related to the actions of paging, then accept the answer that helped you identify the problem and post the necessary change, finally create a new question with the problem arising from the initial, and preferably post a link to the original question.

  • @Tobymosque, so that’s what I did. I was making the edits, to show the evolution that I was getting. So much so that I opened another post. Sometimes we make comments, that really escape the original question, given the scope of the answers and/ or suggestions that appear, but realizing this, I made another post and ended this with the posted solution. In Onosendai’s answer, I didn’t quite understand what he meant, which is why I didn’t mark the answer, that’s all. But anyway I appreciate the answers and your comment, which is always willingly. To Onosendai, I thank mainly.

Show 5 more comments

2 answers

3

You have some possibilities.

  • Full Data, Angular Paging: Your endpoint will return the complete data collection. Excellent method for small collections, bad for large.
  • Server paging, page request via angular: Both the user experience and the database can suffer degradation with the extra amount of data exchange.
  • Hybrid: Generate a set of data pages from the server, and leave the content control on the Angular side. More complex but more efficient method in terms of bank consumption and user experience.

Your case corresponds to the first type.

In your first question the bow for is only used for creating an example array ($scope.pagina). This array then takes 1000 units.

In your second question $scope.numPerPage means how many records there should be per page. If the value is 10, then a set of 35 records can popular 4 pages (3 containing 10 records plus a partial page with 5): 10 + 10 + 10 + 5 = 35.

  • Onosendai, thank you , but it is the following. There is a For of 1000, which was the downloaded example. What I want is to replace the 1000 with my JSON records that REST makes available to me, that’s what I don’t know how to do. There are 10, because in the downloaded example the author has set. What I would like is to leave dynamic in block of X records. This is my doubt that I can’t walk. This is my second week with Angularjs.

  • I will close the post by placing my code for Issue 4 as an answer and open another one regarding the navigation buttons. They’re two different things, not entirely, but I’ll sort things out.

0

I was able to make the Slice with this code. I’m just not able to bring the navigation buttons between the pages:

var app = angular.module('app', []);

app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])

function TipoContatoOperadoraController($scope, $http) {



    $http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
        .success(function (data) {

            $scope.filteredPagina = []
              , $scope.currentPage = 1
              , $scope.maxSize = 5
              , $scope.numPerPage = data.items.length / $scope.maxSize;

            $scope.listaTipoContatoOperadora = data.items;

            $scope.makePagina = function () {
                $scope.app = [];
                for (i = 1; i <= data.items.length; i++) {
                    $scope.app.push({ text: "Página " + i, done: false });
                }
            };

            $scope.makePagina();

            $scope.$watch("currentPage + numPerPage", function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;

                $scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end);
            });

        })
        .error(function () {
            //$scope.dt = 'Teste: ' + $scope.data;
            $scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
        });

}

And my view (only the TD’s) was like this:

<tr data-ng-repeat="lista in filteredPagina">
    <td>{{ lista.id }}</td>
    <td>{{ lista.nome }}</td>
    <td>{{ lista.tipoContato }}</td>
    <td>{{ lista.dataUltimaAtualizacao }}</td>
    <td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>

I just changed the foreach to the filtered page(s) (s)

Browser other questions tagged javascript html asp.net-mvc angularjs asp.net-web-api

You are not signed in. Login or sign up in order to post.