Компонент пагинации пользовательского интерфейса ReactJS Ant Design

Опубликовано: 8 Августа, 2022

В Ant Design Library этот компонент уже собран, и его также очень легко интегрировать . Компонент пагинации позволяет пользователю отображать номер страницы и переключаться между страницы легко с помощью следующей и предыдущей кнопки. Мы можем использовать следующий подход в ReactJS для использования компонента Ant Design Pagination Component.

Синтаксис:

<Pagination defaultCurrent={ } total={ } />

Реквизит пагинации:

  • текущий: используется для обозначения значения текущего номера страницы.
  • defaultCurrent: используется для обозначения значения по умолчанию начального номера страницы.
  • defaultPageSize: используется для обозначения значения по умолчанию количества элементов данных на странице.
  • disabled: используется для отключения нумерации страниц.
  • hideOnSinglePage: используется для указания, следует ли скрывать пейджер на одной странице или нет.
  • itemRender: используется для настройки содержимого innerHTML элемента.
  • pageSize: используется для обозначения значения количества элементов данных на странице.
  • pageSizeOptions: используется для указания параметров sizeChanger.
  • отзывчивый: используется, чтобы разбиение на страницы соответствовало ширине окна, если размер не указан.
  • showLessItems: используется для отображения меньшего количества элементов страницы.
  • showQuickJumper: используется, чтобы указать, можете ли вы переходить на страницы напрямую или нет.
  • showSizeChanger: используется для указания, показывать ли выбор pageSize.
  • showTitle: используется для указания, показывать ли заголовок элемента страницы.
  • showTotal: используется для отображения рейнджера и общего числа.
  • простой: используется для указания, следует ли использовать простой режим или нет.
  • размер: используется для указания размера страницы.
  • total: используется для обозначения значения общего количества элементов данных.
  • onChange: это функция обратного вызова, которая срабатывает при изменении номера страницы или размера страницы.
  • onShowSizeChange: это функция обратного вызова, которая запускается при изменении размера страницы.

Создание приложения React и установка модуля:

  • Шаг 1: Создайте приложение React с помощью следующей команды:

     npx имя папки create-реагировать-приложение

  • Шаг 2: После создания папки проекта, т. е. имени папки , перейдите к ней с помощью следующей команды:

     cd имя папки

  • Шаг 3: После создания приложения ReactJS установите требуется модуль с помощью следующей команды:

     нпм установить и

Структура проекта: Это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




import React from "react"
import "antd/dist/antd.css";
import { Pagination } from "antd";
  
export default function App() {
  
  return (
    <div style={{ display: "block", width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Pagination Component</h4>
      <Pagination defaultCurrent={1} total={100} />
    </div>
  );
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://ant.design/components/pagination/

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ