none
Botoeira de navegação na minha paginação não aparece RRS feed

  • Pergunta

  • Não consigo navegar no meu site, por conta de uma paginação que eu fiz. Peguei um exemplo na Internet e adaptei à minha realidade. Bem, consegui fazer o slice do json gerado, mas preciso mostrar a botoeira de navegação para avançar ou retroceder às páginas que quero. O que eu achei de estranho, foi a forma que o autor do exemplo incluiu o angular, o css e etc.. Ele fez assim: <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>

    Veja que existe um @* e um cara data-semver..., não sei o que é isso. O fato é que se eu faço assim em mina _Layout.cshtml, dá zica sem "microcefalia". O exemplo no plunker está nesselink. O original está aqui. Aqui estão os meus códigos:

    _Layout.cshtml

    <!DOCTYPE html>
    <html data-ng-app="app">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/Content/bootstrap.min.css")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Tipo Contato Operadora", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                        <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                        <li>@Html.ActionLink("Lista de Tipo Contato Operadora", "Index", "GetTipoContatoOperadora", new { area = "" }, null)</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/angular.min.js"></script>
        <script src="~/Scripts/TipoContatoOperadoraController.js"></script>
        <script src="~/Scripts/ui-bootstrap-tpls-1.3.3.min.js"></script>
    
        @RenderSection("scripts", required: false)
    </body>
    </html>
    
    Minha Controller
    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.';
            });
    
    }

    Minha Index e a table, repeat, paginação e etc

    @{
        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 filteredPagina">
                                        <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>
    
    <div ng-controller="TipoContatoOperadoraController">
        @*<ul>
            <li ng-repeat="page in filteredPagina">{{page.text}}</li>
        </ul>*@
        <pagination ng-model="currentPage" total-items="app.length" max-size="maxSize" boundary-links="true"></pagination>
    
    </div>

    quarta-feira, 13 de julho de 2016 12:22