Paging

Configuration

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.
• Basic settings

  Parameter	Description
  Total pages	The total number of pages. If the total field is configured on the Data tab, the value from the data is used with priority.
  Page number spacing	The spacing to the left and right of each page number, in pixels. This setting also applies to the Switcher and Jumper configuration items.
  Page number width	The width of the page numbers, in pixels.
  Background color	The background color of the page numbers.
  Border style	The border style of the page numbers. You can set the line type, border radius, border width, and border color.
  Text style	The style of the text within the paging control. You can set the font, font weight, font size, and text color.
  Selected style	The style of a selected page number. Background color: The background color of the selected page number. Border style: The border style of the selected page number. You can set the line type, border radius, border width, and border color. Text style: The style of the text for the selected page number. You can set the font, font weight, font size, and text color.
  Page-turning button	The style of the page-turning buttons. Custom style: Turn on this switch to customize the style of the page-turning buttons. You can set the Display type to Symbol or Text. Turn off this switch to use the default symbol style, which cannot be customized. Button width: The width of the page-turning buttons, in pixels. This is configurable only when the Custom style switch is on. Side arrows: Drag the slider to adjust the size of the arrows, the default arrow color, and the arrow color on mouseover. This is configurable only when the Custom style switch is on and Display type is set to Symbol. Display text: The text to display for the Previous and Next buttons. This is configurable only when the Custom style switch is on and Display type is set to Text. Text style: The style of the text on the page-turning buttons. You can set the font size, default text color, and text color on mouseover. This is configurable only when the Custom style switch is on and Display type is set to Text. Background style: The background color of the page-turning buttons. You can set the default color and the color on mouseover. This is configurable only when the Custom style switch is on. The background style does not apply to the ellipsis symbol. Border style: The border style of the page-turning buttons. You can set the default border color and the border color on mouseover. This is configurable only when the Custom style switch is on. The border style does not apply to the ellipsis symbol. Ellipsis symbol: The style of the ellipsis symbol. You can set the size, default color, and color on mouseover. This is configurable only when the Custom style switch is on.

• Advanced features

  Parameter	Description
  Auto-hide	Turn on this switch to automatically hide the widget when there is only one page. Turn off this switch to keep it visible.
  Simple display	Turn on this switch to display fewer page number options.
  Switcher	The style of the switcher in the paging widget. Click the icon to show or hide the switcher. Prompt text: The text to display in the switcher. The default is items/page. Items to display: The number of items to show in the switcher's drop-down list. Options are 10/20/3010/20/50/100, and 10/20/50/100/200/500. Dropdown arrow: The style of the dropdown arrow. You can set the arrow size, the distance from the right edge, and the arrow color.
  Jump Box	The style of the jumper in the paging widget. Click the icon to show or hide the jumper. Prompt text: The text to display in the jumper. Text margin: The left and right margins of the text within the jumper, in pixels. Text style: The style of the text within the jumper. You can set the font, font weight, font size, and text color.
  Current/Total	The style of the current and total page count display. Click the icon to show or hide this information. Display position: The position of the Current/Total display. Options are Align left or Align right. Margin settings: The left and right margins of the Current/Total display, in pixels. Text style: The style of the text in the Current/Total display. You can set the font, font weight, font size, and text color.

Data

The sample data for the preceding graph is as follows.

[
  {
    "total": 400,
    "current": 16,
    "pageSize": 10,
    "disabled": [
      3,
      6,
      9
    ]
  }
]

{ disabled: [3, 6, 9] }

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction

Select Enable next to On page click to enable the interaction feature for the widget. The Paging widget has interaction settings that allow you to click different page numbers to trigger data requests and pass callback values, which can then be used by other widgets.

By default, the total, current, and pageSize parameters from the data panel are passed as callback values. For more information, see Configure a widget callback ID.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.
3. On the Blueprint Editor configuration page, click the Paging widget in the Imported Nodes section. The configuration parameters for the Paging widget are displayed on the canvas, as shown in the following figure.
   • Events

     Event	Description
     When the Data API Request Completes	The event that is triggered after a data API request is returned and processed by a filter. The processed data is also passed in JSON format. For a data example, see the Data Response section on the Data tab in the widget's configuration panel in the canvas editor.
     When Data API Request Failed	The event that is triggered when a data API request fails due to a network issue or an API error. The processed data is also passed in JSON format. For a data example, see the Data Response section on the Data tab in the widget's configuration panel in the canvas editor.
     On Page Click	The event that is triggered when a node is clicked. The data item corresponding to the value is also passed.

   • Actions

     Action	Description
     Request Data API	Re-requests server-side data. Data passed from input data processing nodes or layer nodes is used as parameters. For example, if the Paging widget is configured with an API data source of http://api.test and the data passed to the Request Data API action is { id: '1'}, the final requested API is http://api.test?id=1.
     Import Data API	The data is processed using the component's display format and imported to redraw the component. No new request to the server-side is required. For a data example, see the Data Response Result area on the Data tab. This tab is in the configuration panel to the right of the component in the canvas editor.
     Set Paging	Sets the paging. The input data is an object that contains the following fields. Sample data: { "total": 100, "current": 1, "pageSize": 10 }
     Clear Selected Items	Clears the selected items in the paging control.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. In the widget's Configuration panel, click Copy configuration to clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint Editor configuration page as needed.
     Show	Shows the widget. No parameters are required.
     Hide	Hides the widget. No parameters are required.
     Toggle Visibility	Shows or hides the widget. The following is sample reference data. { // Set to true to show, or false to hide. "status": true, // Show animation. "animationIn": { // The animation type. Set to fade. If you leave this blank, no animation is used. "animationType": "fade", // The animation duration, in ms. "animationDuration": 1000, // The animation easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" }, // Hide animation. "animationOut": { // The animation type. Set to fade. If you leave this blank, no animation is used. "animationType": "fade", // The animation duration, in ms. "animationDuration": 1000, // The animation easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following is sample reference data. { // The move type. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }