Timed Page Turning for Table Components by JavaScript in FVS

This document applies to users who have installed the FineVis Data Visualization plugin to learn FVS template functions.

Version

Expected Effect

You have set the pagination function for the table component, and you hope that the table component can automatically and regularly turn pages to display data during preview. The following figure shows the expected effect.

Implementation Method

Add an After Initialization event for the table component, and use the setInterval() method combined with the pagination API to achieve timed page turning of the table component.

Template Creation

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, and create a blank dashboard. You can customize its name and canvas size, as shown in the following figure.

Data Preparation

Create a database query ds1 with the SQL query statement SELECT * FROM Sales_Volume, as shown in the following figure.

Table Design

Table Adding

Add a table component and click Edit Component to go to the table editing page, as shown in the following figure.

Table Content Design

(1) Drag fields in the dataset into cells, and set corresponding cell titles, respectively. In this example, set Data Setting to List for cell A2 to facilitate subsequent pagination settings. The following figure shows the table style.

(2) Select the title row, and set repeat and freeze for it, so that the title row can be displayed on each page, as shown in the following figure.

(3) Select cell A2, click Condition Attribute, click the + button next to Add Condition, select Pagination from the + drop-down list, select Paginate After Row from the Pagination drop-down list, set Type to Formula in the Formula Condition area, and enter the formula &A2 % 5 = 0, which represents performing pagination every five rows, as shown in the following figure.

After you complete the settings, click Return to FineVis Visualization Dashboard in the upper left corner of the table editing page.

Table Pagination Button Enabling

Set Adaptation to Horizontally and Vertically for the table component, and select Pagination Button in the Table Toolbar area, as shown in the following figure.

After Initialization Event Adding

Add an After Initialization event for the table component, and enter the following JavaScript code.

var re=duchamp.getWidgetByName("Table 1"); //Obtain the table component name.
setInterval(function(){
if(re.getCurrentPage().getIndex()==re.getAllPages().length){
  re.getFirstPage().goto() //When the current page index is equal to the total number of pages, go to the first page.
  }
else{
  re.getNextPage().goto()  //Go to the next page.
  }
 },3000)//Call the API every 3 seconds.

The following figure shows the steps.

Effect Display

PC

Click Save in the upper right corner of the template, and click Preview. The effect is the same as that shown in the section "Expected Effect."

The table automatically turns pages every 3 seconds, and jumps to the first page after the last page.

Mobile Terminal

For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

Download the template by clicking: Timed Page Turning for Table Components by JavaScript in FVS.fvs.