---
title: "Paginación en plantillas de gadgets"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/2215912874/Paginaci%C3%B3n%20en%20plantillas%20de%20gadgets"
format: markdown
---
Cuando quieras paginar los resultados en nuestra plantilla de gadget, debes utilizar el enfoque multidatasource, que te permite realizar alguna transformación del servidor como: limit, group, select, param, where, ...

En tu muestra, puedes obtener los datos página por página con la siguiente instrucción:

`vm.from("{{datasource}}").skip(step*bulk).limit(bulk).exec().then`

Ahora puedes iterar por los resultados con, por ejemplo, la función asíncrona recursiva iterateResult. Es necesario llamar primero con los parámetros iniciales:

```javascript
vm.acum = [];
var bulk = 1000;
var step = 0;
iterateResult(vm.acum, step, bulk, callback);
```

La función callback se llamará cuando se hayan recuperado todos los datos:

```javascript
//función para hacer algo después de recuperar todos los registros
function callback(){
   alert("Recuperando " + vm.acum.length + " registros") 
}
```

El código completo del ejemplo es el siguiente:

```javascript
//función asíncrona recursiva para recuperar los datos. Cuando se procesan todos los datos se llama a la función callback
function iterateResult(acum,step,bulk,callback){
    var acum = acum;
    var step = step;
    var bulk = bulk;
    var callback = callback;
    //salesimportonto_raw es la datasource
     vm.from("salesimportonto_raw").skip(step*bulk).limit(bulk).exec().then(
         function(data){
             if(data!=null && data.length>0){//there is more data
                acum.push.apply(acum, data);
                step++;
                iterateResult(acum,step,bulk,callback);
             }
             else{//there isn't more data
                 //Paginación acabada, ahora dibujar gráfico u otras cosas
                 callback()
             }
         }
     )
}

//función para hacer algo después de recuperar todos los registros
function callback(){
   alert("Recuperando " + vm.acum.length + " registros") 
}

//Esta función se llamará una vez para initar los componentes
vm.initLiveComponent = function(){
    vm.acum = [];
    var bulk = 1000;
    var step = 0;
    iterateResult(vm.acum, step, bulk, callback);
    //Aquí no tenemos el resultado por la función asíncrona
};
```