Ng-table: efecto de carga

Creado en 14 oct. 2015  ·  8Comentarios  ·  Fuente: esvit/ng-table

Cuando se cargan datos desde el servidor, siempre es necesario esperar varios segundos, y se muestra en blanco, entonces, ¿hay alguna forma sencilla de mostrar el texto de carga?

Comentario más útil

¿Hablas del retraso del filtro?

Si es solo un efecto de carga al recuperar datos del servidor, puede usar ngAnimate y css con un conjunto booleano de carga cuando llama a la función getData ():

settings.getData = function (params: ng.ngtable.ITableParams): ng.IPromise<Array<T>> {
                    self.isLoading = true;
                    return self.itemsFunction(self.specification).then((result: IGridItemWrapper<T>): Array<T> => {
                        self.setItems(result.Items);
                        self.isLoading = false;
                        params.total(result.Count);
                        return result.Items;
                    }).catch((error) => {
                        self.isLoading = false;
                    });
};

Y luego agregue una clase css en la tabla:

<table ng-table="plc.tableParams" ng-class="{'loading': plc.isLoading}">

y su relativo en css:

.loading-remove {
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.loading,
.loading-add.loading-add-active {
    opacity: 0.5;
    //animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
.loading-remove.loading-remove-active {
    opacity: 1;
}
<strong i="13">@keyframes</strong> blinker {  
    from { opacity: 1; }
    to { opacity: 0.5; }
}

Todos 8 comentarios

+1, quiero esta función también.

+1

+1

+1

+1

Me siento atascado al cargar los datos, ¿hay alguna solución?

¿Hablas del retraso del filtro?

Si es solo un efecto de carga al recuperar datos del servidor, puede usar ngAnimate y css con un conjunto booleano de carga cuando llama a la función getData ():

settings.getData = function (params: ng.ngtable.ITableParams): ng.IPromise<Array<T>> {
                    self.isLoading = true;
                    return self.itemsFunction(self.specification).then((result: IGridItemWrapper<T>): Array<T> => {
                        self.setItems(result.Items);
                        self.isLoading = false;
                        params.total(result.Count);
                        return result.Items;
                    }).catch((error) => {
                        self.isLoading = false;
                    });
};

Y luego agregue una clase css en la tabla:

<table ng-table="plc.tableParams" ng-class="{'loading': plc.isLoading}">

y su relativo en css:

.loading-remove {
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.loading,
.loading-add.loading-add-active {
    opacity: 0.5;
    //animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
.loading-remove.loading-remove-active {
    opacity: 1;
}
<strong i="13">@keyframes</strong> blinker {  
    from { opacity: 1; }
    to { opacity: 0.5; }
}

Ya no funciona.

¿Fue útil esta página
0 / 5 - 0 calificaciones