laravel 5.5 中未设置分页样式

Posted

技术标签:

【中文标题】laravel 5.5 中未设置分页样式【英文标题】:pagination not styled in laravel 5.5 【发布时间】:2018-03-18 23:02:48 【问题描述】:

这是我的代码,我在其中显示我的博客文章的分页!!

<div class="clearfix">
     $posts->render() 
    <a class="btn btn-secondary float-right" href="#">Older Posts &rarr;</a>
</div>

这里是调用分页函数的控制器。

public function index()

    $posts = post::where('status',1)->paginate(2);
    return view('user.blog',compact('posts'));

我尝试了很多,但我的分页显示但样式不正确! 为什么??

【问题讨论】:

【参考方案1】:

在刀片视图中显示分页链接:

 $posts->links() 

或者如果您需要指定 Bootstrap 4:

$posts->links("pagination::bootstrap-4")

Laravel 文档:https://laravel.com/docs/5.5/pagination

【讨论】:

你在使用 Bootstrap 吗?来自 Laravel 文档:“分页器生成的 html 与 Bootstrap CSS 框架兼容。” 我使用的是 laravel 5.5,boostrap 已经集成了 如何让它工作?它显示了正确的 css 吗? 指定 Bootstrap 4 时会发生什么? $posts->links("pagination::bootstrap-4") 为我工作,谢谢。【参考方案2】:

对于漂亮的 boostrap 4 分页,只需调用以下代码:

 $results->links( "pagination::bootstrap-4") 

【讨论】:

【参考方案3】:

对于 Laravel 8

Laravel 包含使用 Bootstrap CSS 构建的分页视图。要使用这些视图而不是默认的 Tailwind 视图,您可以在 App\Providers\AppServiceProvider 类的 boot 方法中调用分页器的 useBootstrap 方法:

use Illuminate\Pagination\Paginator;

public function boot()

    Paginator::useBootstrap();

Laravel 文档:https://laravel.com/docs/8.x/pagination

【讨论】:

【参考方案4】:

要将引导样式添加到链接,您可以创建包含类似内容的 pagination.blade.php

<!-- Previous page symbol "<" Link -->

@if ($paginator->hasPages())
    <ul class="pagination">
        -- Previous Page Link --
        @if ($paginator->onFirstPage())
            <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
@else
            <li class="page-item"><a href=" $paginator->previousPageUrl() " class="page-link" rel="prev">&laquo;</a></li>
@endif

-- Pagination Elements(represents page number such as 1,2,3) --
@foreach ($elements as $element)
-- "Three Dots" Separator --
    @if (is_string($element))
            <li class="page-item disabled"> $element </li>
    @endif

    -- Array Of Links --
    @if (is_array($element))
        @foreach ($element as $page => $url)
                @if ($page == $paginator->currentPage())
                        <li class="page-item active">
                            <a href="#" class="page-link"> $page <span class="sr-only">(current)</span></a>
                        </li>
                @else
                        <li class="page-item">
                            <a href=" $url " class="page-link"> $page </a>
                        </li>
                @endif
                @endforeach
            @endif
        @endforeach

        -- Next Page symbol ">" Link --
        @if ($paginator->hasMorePages())
                <li class="page-item"><a href=" $paginator->nextPageUrl() " class="page-link" rel="next">&raquo;</a></li>
        @else
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
        @endif
    </ul>
    @endif

比使用

 $results->links('pagination') 

【讨论】:

以上是关于laravel 5.5 中未设置分页样式的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 自定义分页样式

laravel5.5中添加对分页样式的修改上一页和下一页

Laravel分页

Laravel分页

[ Laravel 5.5 文档 ] 数据库操作 —— 在 Laravel 中轻松实现分页功能

Jquery Datatable 分页按钮样式修复