Всем привет. В этой статье я объясню, как вы можете создавать разбивку на страницы в своих проектах, используя только Javascript и React Hooks без использования пакета npm, такого как react-paginate. Давайте начнем.
Когда вы ищете пагинацию с помощью react в Google, вы увидите много ресурсов, но когда вы войдете в ресурсы, вы увидите, что пагинация обычно выполняется с помощью пакета npm. Но в этой статье я расскажу вам, как можно разбить на страницы без использования дополнительного пакета npm.
Что такое нпм?
Прежде чем приступить к пагинации, давайте посмотрим, что такое npm. Npm — это система управления пакетами, разработанная для языка программирования Javascript и принятая Node.js в качестве стандарта. В этой системе пакетов есть пакеты, отвечающие всем требованиям программного обеспечения.
Точно так же существуют пакеты, такие как реагировать на страницы, реагировать-js-разбиение на страницы и реагировать-отзывчиво-разбиение на страницы, которые удовлетворяют ваши потребности в разбивке на страницы в ваших проектах React. Мы будем разбивать страницы без использования этих пакетов.
Предварительная подготовка конструкции
Давайте сначала создадим проект реакции с помощью следующей команды.
npx create-react-app react-pagination
Затем мы сделаем небольшую очистку только в файлах App.js и App.css. Файл App.js будет выглядеть следующим образом. Вы можете удалить все коды CSS в файле App.css.
import './App.css'
function App() {
return (
<div className='App'>
</div>
)
}
export default App
Теперь мы создали наш проект и структуру без кода пагинации. После этого мы теперь начнем делать пагинацию.
Пагинация без пакета Npm
Прежде чем мы начнем, мы будем использовать https://jsonplaceholder.typicode.com/posts в качестве источника API. Отсюда мы получим 100 почтовых данных. В зависимости от количества, которое мы хотим, мы будем показывать сообщения. При этом в зависимости от него будет создаваться количество страниц пагинации. Теперь давайте создадим статусы.
Создание выписок
Здесь мы создадим два состояния. Один будет хранить данные, поступающие из нашего API, в виде массива. Другой будет содержать значения разбивки на страницы. Состояние разбиения на страницы будет содержать значения currentPage и dataShowLenght как объект.
const [data, setData] = useState([]);
const [pagination, setPagination] = useState({
currentPage: 1,
dataShowLenght: 3,
});
- currentPage : укажет текущую страницу разбиения на страницы.
- dataShowLenght: указывает количество сообщений, которые будут отображаться на странице.
Извлечение данных из API
С помощью следующей кодировки мы получили данные постов из https://jsonplaceholder.typicode.com/posts и передали их в состояние данных.
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
Определение общего количества страниц
Существует простая формула для определения количества страниц нумерации страниц. Когда мы делим количество данных на количество отображаемых данных, мы находим количество страниц, которые появятся. Если полученное значение является десятичным числом, нам нужно округлить это число до следующего большего числа.
Логика здесь заключается в том, чтобы получить правильный номер totalPage, который покажет все данные. Добавляем оставшиеся значения на последнюю страницу.
Например, когда есть 10 контента, когда мы хотим показать их как три, у нас останется 1, и мы покажем его один на следующей странице. Таким образом, для 10 контента создается 4 страницы пагинации. Для этого мы будем использовать метод Math.ceil(). Этот метод округляет десятичное число до следующего большего числа. Если результат равен 3,11, он будет округлен до 4. Первые 3 страницы будут отображать 3 данных, а последняя страница будет отображать 1 данные.
const totalPage = Math.ceil(data.length / pagination.dataShowLenght);
Выше мы разделили количество данных на количество отображаемых dataShowLenght, округлили его до следующего большего числа, если оно десятичное, с помощью метода Math.ceil() и присвоили его переменной totalPage.
Функции для запуска при нажатии кнопок пагинации
Здесь мы рассмотрим функции, подготовленные для функциональности создаваемых кнопок пагинации. Мы создадим 3 функции: Numbers, Next и Prev.
Функция, меняющая CurrentPage при нажатии цифр
В приведенной ниже функции значение currenPage заменяется значением входящей страницы. значение dataShowLenght остается прежним.
const paginationPage = (page) => {
setPagination({ ...pagination, currentPage: page });
};
Функция, обеспечивающая смену CurrentPage при нажатии кнопки Next
В приведенной ниже функции значение currenPage увеличивает значение currentPage на единицу. В запросе if, если значение pagination.currentPage меньше значения totalPage, значение currentPage каждый раз будет увеличиваться на 1. Но если оно равно или больше, значение totalPage будет присвоено значению currentPage.
Что мы хотим сделать здесь, так это сделать кнопку «Далее» нефункциональной при достижении последней страницы пагинации. значение dataShowLenght останется прежним.
const paginationNext = () => {
if (pagination.currentPage < totalPage) {
setPagination({ ...pagination, currentPage: pagination.currentPage + 1 });
} else {
setPagination({ ...pagination, currentPage: totalPage });
}
};
Функция, обеспечивающая смену CurrentPage при нажатии кнопки Prev
В приведенной ниже функции значение currenPage уменьшает значение currentPage на единицу. В запросе if else, если значение pagination.currentPage больше 1, значение currentPage каждый раз будет уменьшаться на 1.
Но если он равен или меньше, он присвоит значение 1 значению currentPage. Что мы хотим сделать здесь, так это сделать кнопку «Предыдущая» нефункциональной при достижении первой страницы разбиения на страницы. значение dataShowLenght останется прежним.
const paginationPrev = () => {
if (pagination.currentPage > 1) {
setPagination({ ...pagination, currentPage: pagination.currentPage - 1 });
} else {
setPagination({ ...pagination, currentPage: 1 });
}
};
Поскольку указанные выше 3 функции изменяют значение состояния разбивки на страницы, это приведет к повторному отображению компонента. Теперь давайте в ответ посмотрим на код и попробуем его понять.
Коды возвращаемых полей
Следующие коды содержат все коды в поле возврата в компоненте.
Вы можете посетить мой личный веб-сайт, чтобы узнать больше.
