pagination-control

Chart style

Pagination is an advanced widget that allows you to customize the basic and advanced styles of page numbers and display content across multiple pages.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for and locate configuration items by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

  • Rotate: Rotates the widget around its center. Unit: degrees.

    • Enter a value in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the angle.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget, and a value of 1 fully displays it. Default value: 1.

• Basic Settings

  Metric	description
  Alignment	The alignment of the widget relative to its border. Valid values: left, center, and right.
  Total Page Numbers	The total number of pages and the number of units per page. If the total field is configured on the data panel, the data panel value takes precedence.
  Page Spacing	The horizontal spacing between page numbers, in px. This setting applies to both the switcher and the jump box.
  Page Width	The width of the page number. Unit: px.
  Background Color	The background color of the page number.
  Border Style	The border style of the page number, including the line type, corner radius, line width, and line color.
  Text Style	The font style, weight, size, and color of the page number text.
  Selected Style	The style applied when a page number is selected. Background Color: the color of the background. Border Style: Select the border style during pagination, including the line type, corner angle, line width, and border color. Text Style: Specify the font style, weight, font size, and color of the text in the selected page.
  Disable Style	The style of the widget when disabled, including the background color, border color, and text color.
  Page Button	Sets the style of the page turn button. Custom Style: Turn on the switch to customize the button style. You can set the Display Style parameter to Symbol or Text. When the switch is off, the default display style is Symbol. Page Width: the width of the button. Unit: pixels. This value is available only when you turn on Custom Style. Both Arrows: Adjust the size of the arrows on both sides, the default arrow color, and the hover color. This feature is available only when you turn on Custom Style and set Display Mode to Symbol. Display Text: The text displayed for the Previous and Next buttons. This feature is available only when you turn on Custom Style and set Display Mode to Text. Text Style: The text style in the button, including font size, default color, and hover color. This feature is available only when you turn on Custom Style and set Display Mode to Text. Background Style: the background color of the button, including the default color and hover color. Available only when Custom Style is turned on. Does not apply to ellipsis. Border Style: the border style of the button, including the default border color and hover color. Available only when Custom Style is turned on. Does not apply to ellipsis symbols. Omitted Symbol: The style of the ellipsis symbol in the page button, including the size, default color, and hover color.

• Advanced Features

  Metric	description
  Auto Hide	When turned on, the widget is automatically hidden if only one page exists.
  Brief display	Turn on the switch to display fewer page number options for a compact view.
  Switcher	The style of the switcher in the pagination widget. Click the icon to show or hide the switcher. Prompt Copy: the text displayed in the switcher. Default value: Articles /Page. Display: Specify the number of items to be displayed in the drop-down list. You can select 10/20/3010/20/50/100 or 10/20/50/100/200/500. Drop-down Arrow: The style of the switcher drop-down arrow, including the arrow size, right-side offset, and color.
  Jump Box	The style of the jump box in the pagination widget. Click the icon to show or hide the jump box. Prompt Text: Customize the text displayed in the jump box. Copy Margin: the margin between the left and right sides of the text in the jump box. Unit: pixels. Text Style: The text style in the jump box, including font style, weight, size, and color.
  Current /Total	The style of the current/total display in the pagination widget. Click the icon to show or hide this content. Display Position: Select the position of the content to be displayed in Current /Total. You can select Left or Right. Margin Settings: the margin between the Current /Total content. Unit: pixels. Text Style: the text style in Current /Total, including font style, weight, size, and color.

Data Sources panel

{ disabled: [3, 6, 9] }

Advanced Panel

Turn on the switch to enable global variables. When you click different pages, data requests are triggered and temporary variables are emitted for use in other components. By default, the total, current, and pageSize values from the data panel are emitted. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request is completed and processed by a filter. The processed JSON data is included. For specific data examples, see the Data Response Result section of the Data Source tab in the canvas editor configuration panel.
     When you click Pagination	Triggered when a page number is clicked. The corresponding data item is included in the event. See the following data example. { "total": 400, "current": 16, "pageSize": 10 }

   • Action

     Action	Description
     Import data	Imports pre-processed data for widget redrawing without re-requesting server data. See the following data example. [ { "total": 400, "current": 16, "pageSize": 10, "disabled": [ 3, 6, 9 ] } ]
     Request Data Interface	Requests server data again. Data from an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Set Paging	Set the data items to be paged. For more information, see Data example. { "total": 100, "current": 1, "pageSize": 10 }
     Move	Move a widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data, then modify the style field in the Blueprint Editor data processing node.