Lowdefy
  • Introduction
  • Tutorial
    • Getting started
    • Creating a page
    • Adding blocks
    • Interactive pages
    • Requests
    • Deploy to Netlify
    • Next steps
  • How To
    • Generate CSVs
    • Generate PDFs
  • Concepts
    • Overview
    • The CLI
    • Lowdefy App Schema
    • Context and State
    • Blocks
    • Layout
    • Connections and Requests
    • Events and Actions
    • Operators
    • Secrets
    • Lists
    • Hosting Files
    • Custom Code
    • Custom Blocks
  • Deployment
    • AWS Lambda
    • Docker
    • Netlify
    • Node.js
  • User Authentication
    • Introduction
    • OpenID Connect
    • Login and Logout
    • Protected pages
    • User object
    • Roles
  • Input Blocks
    • AutoComplete
    • ButtonSelector
    • CheckboxSelector
    • CheckboxSwitch
    • ChromeColorSelector
    • CircleColorSelector
    • ColorSelector
    • CompactColorSelector
    • DateRangeSelector
    • DateSelector
    • DateTimeSelector
    • GithubColorSelector
    • MonthSelector
    • MultipleSelector
    • NumberInput
    • Pagination
    • ParagraphInput
    • PasswordInput
    • RadioSelector
    • RatingSlider
    • S3UploadButton
    • Selector
    • SliderColorSelector
    • SwatchesColorSelector
    • Switch
    • TextArea
    • TextInput
    • TitleInput
    • TwitterColorSelector
    • WeekSelector
  • Display Blocks
    • Alert
    • Anchor
    • Avatar
    • Breadcrumb
    • Button
    • DangerousHtml
    • DangerousMarkdown
    • Descriptions
    • Divider
    • EChart
    • Html
    • Icon
    • Img
    • Markdown
    • MarkdownWithCode
    • Menu
    • Message
    • MobileMenu
    • Notification
    • Paragraph
    • Progress
    • Statistic
    • Title
  • Container Blocks
    • Affix
    • Badge
    • Box
    • Card
    • Collapse
    • Comment
    • ConfirmModal
    • Drawer
    • Label
    • Modal
    • Result
    • Span
    • Spin
    • Tabs
    • Tooltip
  • Context Blocks
    • Context
    • PageHCF
    • PageHCSF
    • PageHeaderMenu
    • PageHSCF
    • PageSHCF
    • PageSiderMenu
  • List Blocks
    • ControlledList
    • List
  • Connections
    • Amazon Redshift
    • Amazon S3
    • Axios HTTP
    • Elasticsearch
    • Google Sheets
    • Knex
    • MariaDB
    • MongoDB
    • Microsoft SQL Server
    • MySQL
    • PostgreSQL
    • SendGrid Email
    • SQLite
    • Stripe
  • Actions
    • CallMethod
    • JsAction
    • Link
    • Login
    • Logout
    • Message
    • Notification
    • Request
    • Reset
    • ResetValidation
    • ScrollTo
    • SetGlobal
    • SetState
    • Throw
    • Validate
    • Wait
  • Operators
    • _actions
    • _and
    • _args
    • _array
    • _base64
    • _change_case
    • _date
    • _diff
    • _divide
    • _eq
    • _event
    • _format
    • _function
    • _get
    • _global
    • _gt
    • _gte
    • _hash
    • _if
    • _if_none
    • _index
    • _input
    • _js
    • _json
    • _list_contexts
    • _location
    • _log
    • _lt
    • _lte
    • _math
    • _media
    • _menu
    • _mql
    • _ne
    • _not
    • _number
    • _nunjucks
    • _object
    • _operator
    • _or
    • _product
    • _random
    • _ref
    • _regex
    • _request
    • _secret
    • _state
    • _string
    • _subtract
    • _sum
    • _switch
    • _type
    • _uri
    • _url_query
    • _user
    • _uuid
    • _var
    • _yaml
  • Lowdefy Versions
    • v3.23.3
    • v3.22.0
    • v3.21.2
    • v3.20.4
    • v3.19.0
    • v3.18.1
    • v3.17.2
    • v3.16.5
    • v3.15.0
    • v3.14.1
    • v3.13.0
    • v3.12.6
v3.23.3/input/Pagination/

Pagination

value type: object

The Pagination controls user input for pagination purposes.

This block does not paginate requests, it only manage pagination parameters which can be used to control pagination requests.

Block
  • -9-0 of 100 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • 10
State
block_id:
  current: 0
  pageSize: 10
  skip: 0

Block Setup
id: block_id
type: Pagination
properties:
  pageSizeOptions:
    - 10
    - 20
    - 30
    - 40

Settings
properties:
Disable pager.
Hide pager on short list of a single page.
pageSizeOptions:

Determine whether you can jump to pages directly.
Determine whether to show page size select, it will be true when total > 50.
Show pagination total number and range if boolean, or define a custom string or function to display.
Use simplified pagination display.
Pagination element size.
Total number of items to be displayed in pagination.
layout:
style:
events:
required:
visible:
Pagination JSON Schema Definition
type: object
properties:
  events:
    additionalProperties: false
    properties:
      onChange:
        description: Triggered when current page is changed.
        type: array
      onSizeChange:
        description: Triggered when page size is changed.
        type: array
    type: object
  properties:
    additionalProperties: false
    properties:
      disabled:
        default: false
        description: Disable pager.
        type: boolean
      hideOnSinglePage:
        default: false
        description: Hide pager on short list of a single page.
        type: boolean
      pageSizeOptions:
        default:
          - 10
          - 20
          - 30
          - 40
        description: Specify the page size changer options.
        items:
          type: number
        type: array
      showQuickJumper:
        default: false
        description: Determine whether you can jump to pages directly.
        type: boolean
      showSizeChanger:
        default: false
        description: >-
          Determine whether to show page size select, it will be true when total >
          50.
        type: boolean
      showTotal:
        default: false
        description: >-
          Show pagination total number and range if boolean, or define a custom
          string or function to display.
        type:
          - boolean
          - string
          - object
      simple:
        default: false
        description: Use simplified pagination display.
        type: boolean
      size:
        default: default
        description: Pagination element size.
        enum:
          - small
          - default
        type: string
      total:
        default: 100
        description: Total number of items to be displayed in pagination.
        type: integer
    type: object
  

Was this helpful?

😭
😟
😊
😀
Edit this page on Github

Build internal tools with YAML.

hello@lowdefy.com

Subscribe to our newsletter

Receive the latest Lowdefy updates in your inbox.
Why Lowdefy
Quick Start Tutorial
Deploy to Netlify
How Lowdefy Works
Github Repository
Version Changelog
Apache-2.0 License
© 2021 Lowdefy, Inc. - Give. Easy. Value.