Hi Benedikt,
The Next() and Prev() functions will execute the paint function of the extension again in order to give you a way to paint the paged data. However, it doesn't recreate the extension. You should notice the Rows.length increasing as you call the Next() function. If you're trying to download all of the data before rendering anything you can use the Data.TotalSize object to understand how many rows exist in total and use it within a loop to ensure you don't call .Next() endlessly.
Otherwise, in your code you'll need to either append to the HTML or rewrite it each time the page is changed. I'm not sure if that makes sense? I've included a sample below that demonstrates a simple paging extension that rewrites the HTML each time to reflect the current page. The example is based on a single dimension and single measure.
I hope this helps
Qva.AddExtension('PagingExample', function() {
this.Element.innerHTML = "";
if(!this.Data.Page){
this.Data.Page = new this.Data.PageObject(this.Data, this.Data.PageSize.y); //this.Data.PageSize.y uses the PageHeight set in the Definition or the default which is 40
}
html = "<div style='height:calc(100% - 40px);'>";
var pageStart = this.Data.Page.StartItem(); //Index of the first item on the current page
var pageEnd = pageStart + this.Data.Page._size;
for (var row=pageStart; row<pageEnd; row++){
html += "<label style='font-weight:bold;'>";
html += this.Data.Rows[row][0].text;
html += ": </label>";
html += this.Data.Rows[row][1].text;
html += "<br />";
}
html += "</div>";
html += "<div style='height: 40px;'>";
html += "<button data-direction='Prev'>Prev</button>"
html += "<button data-direction='Next'>Next</button>"
html += "</div>";
this.Element.innerHTML = html;
this.Element.onclick = page.bind(this);
});
function page(event){
if(event.target.tagName == "BUTTON"){
var direction = event.target.attributes["data-direction"].value;
switch(direction){
case "Next":
this.Data.Page.Next();
break;
case "Prev":
this.Data.Page.Prev();
break;
}
}
}
