laravel 自定义分页样式「建议收藏」

laravel 自定义分页样式「建议收藏」以laravel的默认表users表为例,插入100条数据$arr=[];for($i=0;$i<100;$i++){$arr[]=[‘name’=>’NAME_’.$i,’email’=>”email@{$i}.com”,’password’=>$i,’created_at’=>date(‘Y-m-dH:i:s’),’updated_…

大家好,又见面了,我是你们的朋友全栈君。

文章目的实现laravel分页样式的修改:(样式有点丑)
在这里插入图片描述

以laravel的默认表users表为例,插入100条数据

$arr = [];
for($i=0;$i<100;$i++){
        $arr[] = ['name'=>'NAME_'.$i,'email'=>"email@{$i}.com",'password'=>$i,'created_at'=>date('Y-m-d H:i:s'),'updated_at'=>date('Y-m-d H:i:s')];
    }
    DB::table('users')->insert($arr);

在这里插入图片描述

查询数据渲染到模板

public function test(){
        $users = DB::table('users')->paginate(10);
        return view('paginate',['users'=>$users]);
    }

新建paginate.blade.php文件

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
        table td,th {
            border: 1px solid #e5e5e5;
            padding: 8px;
        }
        .table{
            width: 100%;
            margin-left: 20%;
        }
    </style>
</head>
<body>

<div >
    <div class="table">
        <h1>用户列表</h1>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>email</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{
  
  {$loop->iteration}}</td>
                    <td>{
  
  {$user->name}}</td>
                    <td>{
  
  {$user->email}}</td>
                    <td>{
  
  {$user->created_at}}</td>
                    <td>{
  
  {$user->updated_at}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
        {
  
  {$users -> links()}}

    </div>
</div>

</body>
</html>

此时的分页为laravel默认的效果
在这里插入图片描述

使用 vendor:publish 命令导出视图文件到resources/views/vendor 目录

php artisan vendor:publish --tag=laravel-pagination

生成多种分页样式模板文件
在这里插入图片描述

此时默认使用pagination文件的第一个分页样式 bootstrap-4.blade.php
Paginator::defaultView(‘vendor.pagination.default’); 可以切换其他的样式

修改箭头符号为 上一页
在这里插入图片描述
修改后效果:
在这里插入图片描述

加一个跳转页数的输入框
在这里插入图片描述

分页blade的代码:

<style>
    .pagination select {
        width: 110px;
        margin-top: -24px;
    }
    .pagination li{
        display: inline-block;
    }
    .pagination input{
        width: 50px;
    }
</style>

@if ($paginator->hasPages())

    <ul class="pagination">

        {
  
  {--添加分页数量选择--}}
        <li class="page-item">
            <select class="form-control" name="perPage" >
                <option value="10" selected>10条/页</option>
                <option value="20" selected>20条/页</option>
                <option value="50" selected>50条/页</option>
                <option value="100" selected>100条/页</option>
            </select>
        </li>

        {
  
  {-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            {
  
  {--<li class="page-item disabled"><span class="page-link">&lsaquo;</span></li>--}}
            <li class="page-item disabled"><span class="page-link">上一页</span></li>
        @else
            {
  
  {--<li class="page-item"><a class="page-link" href="{
  
  { $paginator->previousPageUrl() }}" rel="prev">&lsaquo;</a></li>--}}
            <li class="page-item"><a class="page-link" href="{
  
  { $paginator->previousPageUrl() }}" rel="prev">上一页</a></li>
        @endif

        {
  
  {-- Pagination Elements --}}
        @foreach ($elements as $element)
            {
  
  {-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="page-item disabled"><span class="page-link">{
  
  { $element }}</span></li>
            @endif

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

        {
  
  {-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            {
  
  {--<li class="page-item"><a class="page-link" href="{
  
  { $paginator->nextPageUrl() }}" rel="next">&rsaquo;</a></li>--}}
            <li class="page-item"><a class="page-link" href="{
  
  { $paginator->nextPageUrl() }}" rel="next">下一页</a></li>
        @else
            {
  
  {--<li class="page-item disabled"><span class="page-link">&rsaquo;</span></li>--}}
            <li class="page-item disabled"><span class="page-link">下一页</span></li>
        @endif

        <li>
            <strong> 跳转到:</strong>
        </li>
        <li>
            <input class="form-control">
        </li>
        <li>
            <strong> 页</strong>
        </li>
    </ul>
@endif

附:
每个分页器实例都可以通过以下方法提供更多分页信息:

$results->count()
$results->currentPage()
$results->firstItem()
$results->hasMorePages()
$results->lastItem()
$results->lastPage() (使用simplePaginate 时无效)
$results->nextPageUrl()
$results->perPage()
$results->previousPageUrl()
$results->total() (使用simplePaginate 时无效)
$results->url($page)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160649.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号