📔
DataGrid Documentation
  • Getting Started
  • Buy DataGrid on CodeCanyon
  • Controls
    • Text Filter
    • Sort DropDown Control
    • Sort Button Control
    • Checkbox Filter
    • Radio Button Filter
    • Select Filter
    • Button Filter
    • Pagination
    • Page Size Control
    • Label Control
    • Reset Button
  • Multiple version of the same control (data-id attribute)
  • Languages Support
  • Special Classes
  • Deep Links
  • Storage
  • Multiple DataGrids on Page
  • Filter AND/OR Logic [NEW]
  • How To
    • How To Sort Table in JavaScript
    • HTML Table with Sortable Headers
    • How to Filter HTML Table By Multiple Columns
    • Double Sort (Multiple Column Ordering)
Powered by GitBook
On this page

Was this helpful?

  1. Controls

Page Size Control

Page size control allows changing the number of items on a page.

<select data-grid-control="page-size" style="width: 200px">
    <option value="4">4 items per page</option>
    <option value="8">8 items per page</option>
    <option value="12">12 items per page</option>
    <option value="16">16 items per page</option>
    <option value="Infinity">all</option>
</select>

Data Attribute

Value

Description

Required

data-grid-control

page-size

This attribute defines the control type.

Required

data-scroll-top

no value

If this data attribute exists,

the page will scroll to the top each time

a pagination button will be pressed.

Optional

Initial value

To define the initial page size value, the following setting should be passed to the initialization function:

<script>
    datagrid({
        pageSize: 12
    });
</script>
PreviousPaginationNextLabel Control

Last updated 4 years ago

Was this helpful?