---
title: "Pagination in gadget templates"
canonical: "https://onesaitplatform.refined.site/space/DOCT/2220791546/Pagination%20in%20gadget%20templates"
format: markdown
---
When you want to paginate the results in our gadget template, you can use the multidatasource approach, that allow you to perform some server transformation like: limit, group, select, param, where, …

In your sample, you can get the data page by page with the following statement:

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

Now, you can iterate through the results with, for example, the recursive async function iterateResult. You need to call it first with the initial parameters:

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

The callback function will be call when all the data has been retrieved:

```javascript
//function for doing something after all records are recover
function callback(){
   alert("Recovered " + vm.acum.length + " records") 
}
```

The full code of the example is the following:

```javascript
//recurse async function for recovering data. When all data is processed callback function is called
function iterateResult(acum,step,bulk,callback){
    var acum = acum;
    var step = step;
    var bulk = bulk;
    var callback = callback;
    //salesimportonto_raw is the 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
                 //Paginate finished, now draw chart or other things
                 callback()
             }
         }
     )
}

//function for doing something after all records are recover
function callback(){
   alert("Recovered " + vm.acum.length + " records") 
}

//This function will be call once to init components
vm.initLiveComponent = function(){
    vm.acum = [];
    var bulk = 1000;
    var step = 0;
    iterateResult(vm.acum, step, bulk, callback);
    //Here we don't have the result because async function
};
```