Movatterモバイル変換

[0]ホーム
URL:

newupdatedpro

  • Overview

  • Framework and Utilities

  • Angular

  • React

  • Vue

  • Blazor

  • Integrations

  • Roadmap

  • Release Notes

  • Accessibility

  • Theme Builder

  • Complex Components

  • Grid

  • Gantt Chart

  • Scheduler

  • CardView

  • Chart

  • Editor

  • DockingLayout

  • Kanban

  • PivotTable

  • Table

  • Core Components

  • Accordion

  • Badge

  • Barcode

  • Button

  • Breadcrumb

  • Card

  • Carousel

  • Calendar

  • CheckBox

  • ComboBox

  • ColorPicker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • FileUpload

  • Form

  • Gauge

  • Input

  • ListBox

  • ListMenu

  • Layout

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • QueryBuilder

  • RadioButton

  • Rating

  • RepeatButton

  • Ribbon Bar

  • Qrcode

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Window

Grid - Paging HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com

Build your web apps using Smart UI

Smart.Grid - Paging

Grid Paging

Pagination can be enabled in Smart.Grid in order to view large data sets page by page and navigate through them easily.

Pagination is configured via two properties/objects:paging andpager.

To enable paging, setpaging.enabled totrue.

The number of Grid rows per page can be set viapaging.pageSize. The default number is 10. The current page index can be get or set by accessingpaging.pageIndex.

Once pages are set up, they can be navigated in two ways:


More information: propertypaging in the Grid API documentation.

Pager

Pager is a user interface component that allows for easy navigation of Grid pages and customization of paging settings. The pager part of Smart.Grid is an instance of Smart.Pager (<smart-pager>)

To enable the pager, setpager.visible totrue.


Parts of the pager:

  1. Navigation buttons
  2. Page index selectors
  3. Auto ellipsis
  4. Navigation input
  5. Page size selector
  6. Summary

Additional settings of thepager object that control these parts are:

  • autoEllipsis - sets the ellipsis display mode.
  • position - sets the position of pager -'near' (above rows),'far' (below rows), or'both'.
  • template - sets a template for the pager.
  • pageSizeSelector - describes the settings for the 'rows per page' option.
  • summary - describes the summary settings.
  • navigationButtons - describes the navigation buttons settings.
  • navigationInput - describes the settings about navigation input option.
  • pageIndexSelectors - describes the settings for the numeric page buttons.

More information: propertypager in the Grid API documentation.

Spinner

An alternative to the pager is the spinner, which can be enabled by settingpaging.spinner.enabled totrue. The spinner appears as a pair of arrows above the Grid's scrollbar. Pressing the arrows navigates through Grid pages.

The propertypaging.spinner.step determines the number of pages to navigate via the spinner.

[8]ページ先頭
©2009-2025 Movatter.jp