3 Replies Latest reply: Feb 24, 2015 11:55 AM by Benedikt Süßmann RSS

    PageObject Next Page

      I have a problem with my extension.

       

      my pageHeight in the Definition.xml is set to 500 and I dont want to raise it up, because when I add the extension it is not clear how much data rows will be there.

       

      so I want to use the PageObject to get the next datapages.

      my code is the following :

       

      var data = _this.Data;

      data.Page = new data.PageObject(data, 500);

       

      when I now call data.Page.Next() it will reload the extension and I am in an endless loop.

       

      so how is the correct way to use it ? can someone please help me ?

        • Re: PageObject Next Page

          No one has an idea ?

            • Re: PageObject Next Page
              Nick Webster

              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;

                  }

                }

              }