Добро пожаловать назад.
В последней части мы создали очень простой компонент таблицы данных с использованием Laravel и VueJS. Во второй части мы будем работать над улучшением компонента, добавив в него функции разбивки на страницы и сортировки.
Начнем с бэкэнда.
Внесем изменения в UsersController файл.
Здесь мы сортируем пользователей по предоставленному столбцу и порядку, а затем реализуем разбиение на страницы. Итак, если мы посетим url: https://myapp.dev/users/data-table, мы получим данные в следующем формате:
Итак, нам нужно исправить компонент DataTable, чтобы он работал в соответствии с данными, подаваемыми серверной частью Laravel. Итак, наш DataTable.vue компонент выглядит так:
Теперь, если мы посетим наш домашний URL: https://myapp.dev, мы получим следующий результат:
Вывод:
В этой части мы реализовали функции разбивки на страницы и сортировки для нашего компонента DataTable. В следующей части мы реализуем функцию поиска, ограничивая контент и добавляя загружаемое изображение, когда данные извлекаются из базы данных.
Ссылка на код на Github.
Ссылки:
- Компонент пагинации с Laravel и Vue от Мадху Судхана Субеди
