Cum se implementează paginarea pe partea serverului în angularjs folosind angular-ui bootstrap.? (Programare, Javascript, Angularjs, Twitter Bootstrap, Angular Ui Bootstrap, Angular Ui)

albert a intrebat.

Vă rugăm să sugerați diferite metode de implementare a paginării pe partea serverului folosind angular js și angular-ui bootstrap. Aș fi paginat o listă de tabel folosind ng-repeat în funcție de pagina curentă selectată în directiva de paginare angualr-ui bootsrap. Deoarece trebuie să evităm apelurile frecvente către server. Trebuie să recuperăm 50 de elemente de pe server la un moment dat. Afișăm 10 elemente pe pagină.Deoarece trebuie să paginăm la seturi de date mai mari, trebuie să păstrăm modelul ng-repeat pentru a conține întotdeauna 50 de elemente din motive de performanță.

2 răspunsuri
Raman Sahasi

DirPaginate este ceva care va îndeplini cerințele acestei întrebări

Vă rugăm să consultați acest lucru Plunker pentru o demonstrație a acestui lucru.

Atunci când utilizați paginarea pe server, va trebui să obțineți răspunsul JSON în acest format.

Formatul răspunsului JSON

{
    Count: 1400,
    Items: [
        { // item 1... },
        { // item 2... },
        { // item 3... },
        ...
        { // item 25... }
    ]
}

Singurul lucru la care trebuie să fiți atenți este să obțineți numărul total de elemente din baza de date, deoarece veți avea nevoie de acest lucru pentru a-l transmite directivei noastre.

Formatul controlerului angular

.controller('UsersController', function($scope, $http) {
    $scope.users = [];
    $scope.totalUsers = 0;
    $scope.usersPerPage = 25; // this should match however many results your API puts on one page
    getResultsPage(1);

    $scope.pagination = {
        current: 1
    };

    $scope.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

    function getResultsPage(pageNumber) {
        // this is just an example, in reality this stuff should be in a service
        $http.get('path/to/api/users?page=' + pageNumber)
            .then(function(result) {
                $scope.users = result.data.Items;
                $scope.totalUsers = result.data.Count
            });
    }
})

și, în cele din urmă, acesta este un exemplu de cum îl veți integra în html-ul dvs.

HTML

<div ng-controller="UsersController">
    <table>
        <tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current">
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
        </tr>
    </table>

    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>

Vă rugăm să consultați secțiunea Lucrul cu date asincrone din această pagină.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data

rahil471

Am folosit biblioteca dir-pagination. Este foarte ușor de utilizat și, de asemenea, ușor de utilizat. documentația este, de asemenea, foarte bună.

Aici este un implementare exemplu.

Editare: Tocmai am observat că Raman Sahasi a dat aceeași sugestie în răspunsul său. O voi păstra pe a mea, cred că tutorialul de implementare end-to-end ar fi util pentru unii.