Nie działający moduł uib-pagination.

0

Wykonuję właśnie jeden z tutoriali. Napotkałem na problem, gdzie nie potrafię dodać uib-pagination tak by był widoczny. Badając stronę widzę go z rozmiarem 0x0.
Grid.html wygląda tak:

<div class="container-fluid table-responsive">
    <hr />
    <table class="table table-striped">
        <thead>
            <tr>
                <th width="20%">SKU</th>
                <th width="40%">Title</th>
                <th width="10%">On Order</th>
                <th width="10%">Due</th>
                <th width="10%">Stock Level</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="x in data.lowstockdata.data | limitTo: data.lowstockdata.itemsperpage">
                <td>{{x.SKU}}</td>
                <td><a style="cursor: pointer" ng-click="openProduct(x)">{{x.ProductTitle}}</a></td>
                <td>{{x.OnOrder}}</td>
                <td>{{x.Due}}</td>
                <td>{{x.StockLevel}}</td>
                <td>{{x.Location}}</td>
            </tr>
        </tbody>
    </table>
</div>
<uib-pagination total-items="totalitems" items-per-page="itemsperpage" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>

W App.js mam dodante ui.boostrap:

var App = angular.module('App', ['ngRoute', 'ui.bootstrap']);

App.controller('MainController', MainController);
App.controller('GridController', GridController);

var configFunction = function ($routeProvider, $httpProvider) {
    $routeProvider.
        when('/grid', {
            templateUrl: 'SPA/Views/Grid.html',
            controller: GridController
        })
        .otherwise({
            redirectTo: function () {
                return '/grid';
            }
        });
}
configFunction.$inject = ['$routeProvider', '$httpProvider'];

App.config(configFunction);

A w głównym index.html dodaję chyba wszystko co jest możliwe. I nadal nie działa..

<script src="~/js/angular.js"></script>
    <script src="~/js/angular-route.js"></script>
    <script src="~/js/angular-touch.js"></script>
    <script src="~/js/angular-animate.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="~/js/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/ui-bootstrap-tpls.js"></script>
    <script src="~/js/ui-bootstrap.js"></script>
    <script src="~/js/bootstrap.bundle.js"></script>
    

    <link href="~/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/ui-bootstrap-csp.css" rel="stylesheet" />
    <link href="~/css/bootstrap-grid.css" rel="stylesheet" />
    <link href="~/css/bootstrap-reboot.css" rel="stylesheet" />

    <script src="~/SPA/Controller/GridController.js"></script>
    <script src="~/SPA/Controller/MainController.js"></script>
    <script src="~/SPA/App.js"></script>

Macie jakieś pomysły?

0

Pokaż jeszcze kod controllera, bo podejrzewam, że błędnie bindujesz pola tego komponentu ("totalItems", "itemsperpage" itd)

0
var GridController = function ($scope) {
    $scope.data = {
        lowstockdata: {
            totalitems: 726,
            currentPage: 1,
            itemsperpage: 8,
            data: []
        }
    };

    function GetData() {
        $scope.data.lowstockdata.data = [];
        for (var i = 0; i < $scope.data.lowstockdata.itemsperpage; i++) {
            var rndNum = ($scope.data.lowstockdata.currentPage * 10) + i;

            $scope.data.lowstockdata.data.push({
                SKU: "SKU" + rndNum,
                ProductTitle: "Product Title: " + rndNum,
                OnOrder: rndNum * 2,
                Due: rndNum - 1,
                StockLevel: rndNum
            });
        }
    }

    GetData();

}



GridController.$inject = ['$scope'];
0

No właśnie, źle bindujesz i nie masz funkcji pageChanged(). W komponencie ustawiasz np. "totalItems", ale nie masz takiego pola w kontrolerze, uib-pagination jest świetnym komponentem, ale z fusów to sobie nie wywróży konfiguracji :P

Dodaj sobie w kontrolerze:

$scope.totalItems = 50;
$scope.itemsPerPage = 5;
$scope.currentItem = 1;
$scope.pageChanged = function() {
    console.log('hello');
}

Te wartości są oczywiście tylko przykładowe :P

0
var GridController = function ($scope) {
    $scope.data = {
        lowstockdata: {
            totalitems: 726,
            currentPage: 1,
            itemsperpage: 8,
            data: []
        }
    };

    $scope.totalItems = 726;
    $scope.itemsPerPage = 8;
    $scope.currentPage = 1;
    $scope.pageChanged = function () {
        console.log('hello');
    }

    function GetData() {
        $scope.data.lowstockdata.data = [];
        for (var i = 0; i < $scope.data.lowstockdata.itemsperpage; i++) {
            var rndNum = ($scope.data.lowstockdata.currentPage * 10) + i;

            $scope.data.lowstockdata.data.push({
                SKU: "SKU" + rndNum,
                ProductTitle: "Product Title: " + rndNum,
                OnOrder: rndNum * 2,
                Due: rndNum - 1,
                StockLevel: rndNum
            });
        }
    }

    GetData();

}

GridController.$inject = ['$scope'];

Kontroler wygląda teraz tak.
Nadal nie działa. A wygląda to tak:
screenshot-20180626153735.png

0

A masz wersję z szablonami tej biblioteki? Bo może zwyczajnie brakuje template dla uib-pagination.

0

Odnoszę wrażenie, że wszystko co powinienem dodać z CSS i JS, to dodałem. Jak widać, chyba coś przeoczyłem, ale nie wiem już nawet co mógłbym więcej dorzucić.

0

tu masz wersję pełną, z szablonami, nic więcej nie potrzebujesz, żeby uib-pagination działał (poza oczywiście poprawną konfiguracją): https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js

0
    <script src="~/js/angular.min.js"></script>
    <script src="~/js/angular-route.js"></script>
    <script src="~/js/angular-touch.js"></script>
    <script src="~/js/angular-animate.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <script src="~/js/bootstrap.min.js"></script>
    <script src="~/js/ui-bootstrap-tpls-2.5.0.min.js"></script>

    <link href="~/css/bootstrap.min.css" rel="stylesheet" />

Ograniczyłem "importy" do takiej ilość, nadal nic. Nie rozumiem co się dzieje. Robię 1:1 jak w poradniku, nie działa, robię po swojemu, nie działa. :/

1

A niech Cię ;)

powinno być:

<ul uib-pagination total-items="totalitems" items-per-page="itemsperpage" ng-model="currentPage" ng-change="pageChanged()"></ul>

a nie:

<uib-pagination total-items="totalitems" items-per-page="itemsperpage" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
0

Faktycznie działa, tylko css pod niego już nie, bo wygląda mniej więcej tak:
screenshot-20180626173915.png

0

Mam dodatkowe pytanie i problem. Zalewa mnie krew.
Piszę projekt w VS17, zmieniam kod, na przykład kontrolera jakiegoś, zapisuję. Odpalam nawet jeszcze raz projekt IIS Express(I tutaj albo w Chrome albo w Firefox) i czasem(zawsze?) np kontroller się nie zmienia, jak sprawdzam go w przeglądarce badając elementy pozostaje jakaś losowa x wersja z przeszłości, dlaczego? I co można z tym zrobić?

1 użytkowników online, w tym zalogowanych: 0, gości: 1