How to use Angular-UI-Grid mit Server Side Paging

Ich bin mit AngularJs Ui-Grid.info zur Anzeige von dynamischen Daten-grids, ich Liebe es, aber nun habe ich, um es Haken bis zu einer Datenbank-Tabelle mit 60.000 Datensätzen mithilfe der server-Seite Filter-und paging-und es scheint, dass die Paginierung Optionen für dieses plugin ist nur für die client-Seite-paging.

Hat sich schon jemand in der Lage, diese arbeiten mit Server Side Paging. Hast du ein code-Beispiel.

Anzeigen-Code

<div class="gridContainer">
    <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>

Teil der Controller

$scope.gridOptions = {
    enableFiltering: true,
    enableColumnResize: true,
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    columnDefs: [
        {
            //field: 'Id', width: 60, displayName: 'Id', enableFiltering: false
            field: 'id', width: 60, displayName: 'Id', enableFiltering: false
        },
        {
            field: 'skill_count',
        },
        {
            field: 'name'
        } 
    ]
};

$scope.loadData = function () {
    skillService.getUnprovisioned(function (data) {
        $scope.gridOptions.data = data;
    });
};
InformationsquelleAutor David Cruwys | 2015-03-17
  1. 29

    Es ist ein server-Seite-Paginierung option in der API.

    http://ui-grid.info/docs/#/api/ui.grid.pagination.api:GridOptions ->
    useExternalPagination

    Hier ist ein Beispiel für serverseitige Paginierung und Sortieren.

    http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview

    Im obigen Beispiel, siehe code-block, die unten gegeben werden, die die server-Seite Paginierung,

    gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
    paginationOptions.pageNumber = newPage;
    paginationOptions.pageSize = pageSize;
    getPage();
});
    • Vielen Dank für die Plunker #guru, das ist genau das was ich brauchte
    • Dies wird gut sein. Nun zu integrieren, die mit einer abstrahierten, Richtlinie version der ui-grid-unendliche scrollen-Beispiel.... eck.
    • Warum muss die '/4' seltsam Aussehen? Ich kopierte, was Sie hier Tat, auf meine Website, und es sieht ähnlich seltsam. Wie kann ich dieses Problem beheben?
    • wenn ich versuche, dies zu tun ich bekam eine Fehlermeldung "TypeError: Cannot read property 'auf' of undefined" auf die "gridApi.Paginierung.auf.paginationChanged" wie kann ich dieses Problem lösen
    • btw, Ihr plunker muss eine spätere version verwenden, Eckige, da Sie auch nicht über die der ui-grid-version gesperrt, ich war immer eckig.Zusammenführen nicht Fehler, wurde behoben, wenn ich die referenzierten Winkel-1.4.9 (passend zu meiner aktuellen Projekt)
    InformationsquelleAutor guru
  2. 0

    Es ist einfach zu bauen Ihr eigenes Netz verwenden uib-Paginierung und ng-repeat.
    Es ist ein vollständiges Beispiel im folgenden link. Hoffe, dass dies helfen würde.

    Winkel-WebAPI Paginierung

    InformationsquelleAutor LENG UNG
Schreibe einen Kommentar