Форум программистов, компьютерный форум, киберфорум
PHP: Laravel
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 24.02.2019
Сообщений: 81
1

Постраничная навигация

07.01.2021, 21:45. Просмотров 990. Ответов 4

Здравствуйте.
Работаю с Laravel 8. Пытаюсь сделать пагинацию на главной странице. Внизу шаблона главной страницы пишу {{ $posts->links() }}. Шаблон отображает заданное количество страниц, НО со стилями что-то твориться безобразное (см рис).

Что посоветуете сделать? Исходный код выглядит так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
        <div class="flex justify-between flex-1 sm:hidden">
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
                    &laquo; Previous
                </span>
            
                            <a href="http://spatie.loc/main?page=2" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                    Next &raquo;
                </a>
                    </div>
 
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700 leading-5">
                    Showing
                    <span class="font-medium">1</span>
                    to
                    <span class="font-medium">3</span>
                    of
                    <span class="font-medium">22</span>
                    results
                </p>
            </div>
 
            <div>
                <span class="relative z-0 inline-flex shadow-sm rounded-md">
                    
                                            <span aria-disabled="true" aria-label="&amp;laquo; Previous">
                            <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                </svg>
                            </span>
                        </span>
                    
                    
                                            
                        
                        
                                                                                                                        <span aria-current="page">
                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">1</span>
                                    </span>
                                                                                                                                <a href="http://spatie.loc/main?page=2" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 2">
                                        2
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=3" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 3">
                                        3
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=4" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 4">
                                        4
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=5" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 5">
                                        5
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=6" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 6">
                                        6
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=7" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 7">
                                        7
                                    </a>
                                                                                                                                <a href="http://spatie.loc/main?page=8" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 8">
                                        8
                                    </a>
                                                                                                        
                    
                                            <a href="http://spatie.loc/main?page=2" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Next &amp;raquo;">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                            </svg>
                        </a>
                                    </span>
            </div>
        </div>
    </nav>
0
Миниатюры
Постраничная навигация  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.01.2021, 21:45
Ответы с готовыми решениями:

Страничная навигация
Подскажите пожалуйста, как задать необходимое количество ссылок для навигации, которые создает...

Постраничная навигация на js
На php выводиться тест сразу 30 вопросов. Через js постраничную навигацию сделал. Отмечаю первую...

Постраничная навигация
Подскажите способы реализации постраничной навигации на php. Пример: Страница &quot;Пользователи&quot;:...

Постраничная навигация
Я сделал полностью вывод , но не могу решить с лемитом . /page/1/ Нужно вывести новость от 10 до...

4
1704 / 1034 / 382
Регистрация: 13.06.2013
Сообщений: 3,508
07.01.2021, 22:10 2
Цитата Сообщение от xat55 Посмотреть сообщение
Что посоветуете сделать? Исходный код выглядит так:
Советую учиться верстать. Курс какой-нибудь пройти. Взять методологию например БЭМ.

HTML5
1
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
Вот это просто бессмысленные классы. Можно тогда вообще не использовать классы и сразу писать style="...".
0
0 / 0 / 0
Регистрация: 24.02.2019
Сообщений: 81
07.01.2021, 22:20  [ТС] 3
tarasalk, в Laravel встроен бустрап. Хотелось бы в рамках бутстрапа решить вопрос.

Добавлено через 2 минуты
В данном случае, я сам никаких классов не использую - вызываю в шаблоне метод links().
0
1704 / 1034 / 382
Регистрация: 13.06.2013
Сообщений: 3,508
07.01.2021, 22:40 4
Лучший ответ Сообщение было отмечено xat55 как решение

Решение

А я думаю это Tailwind css, а не bootstrap.

Цитата Сообщение от xat55 Посмотреть сообщение
В данном случае, я сам никаких классов не использую - вызываю в шаблоне метод links().
В курсе что стили наследуются? Если у контейнера стили кривые, то вложенные теги унаследуют всю эту кривизну. Т.е. нельзя просто взять links() и вставить куда хочется, нужно придерживаться стандартов этого css фреймворка. Поэтому вам надо или свои контейнеры поправить, либо адаптировать под себя шаблон который генерируется в links()

Цитата Сообщение от xat55 Посмотреть сообщение
Исходный код выглядит так:
Это не исходный код, а уже сгенерированный html в браузере.
1
0 / 0 / 0
Регистрация: 24.02.2019
Сообщений: 81
08.01.2021, 12:07  [ТС] 5
Цитата Сообщение от tarasalk Посмотреть сообщение
либо адаптировать под себя шаблон который генерируется в links()
Спасибо за ссылку, не знал об этой возможности...

Решил использовать этот подход:

Кликните здесь для просмотра всего текста
Использование Bootstrap
Laravel включает представления с разбивкой на страницы, построенные с использованием Bootstrap CSS . Чтобы использовать эти представления вместо представлений попутного ветра по умолчанию, вы можете вызвать метод пагинатора useBootstrapв AppServiceProvider:

PHP
1
2
3
4
5
6
use Illuminate\Pagination\Paginator;
 
public function boot()
{
    Paginator::useBootstrap();
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.01.2021, 12:07

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

постраничная навигация
Доброго времени. Вопрос в следующем. использую следующий код для вывода пастов категории &lt;div...

Постраничная навигация
Здравствуйте! Есть вопрос по пагинации. У меня на сайте имеется общая пагинация (картинку...

Постраничная навигация.
Реализую на сайте журнал событий. События выводятся списком по 10 шт, в случае если их больше 10,...

Постраничная навигация
Всем привет, есть вот такой код навигации он работает у меня на дипломке все ок , скопировал его на...

Постраничная навигация
Доброго времени суток, господа! Имеется Opencart 1.5.6. Столкнулся с необходимостью добавить...

постраничная навигация
всем привет. делаю постраничную навигацию. когда в категории есть записи - все работает идеально,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.