修改laravel分页的样式

2019-12-29 15:01:37

参考地址 Laravel分页以及样式——从未如此简单

aravel5.3版本以上的分页比之前的更简单和人性化

1.首先获取到数据，paginate方法 能够自动判定当前页面正确的数量限制和偏移数。默认情况下，当前页数由HTTP 请求所带的 ?page 参数来决定。当然，该值由 Laravel 自动检测，并自动插入由分页器生成的链接。

如果你只想显示出上一页和下一页可以使用simplePaginate().

paginate和simplePaginate方法唯一参数就是你每页想要显示的数目，这个参数规定每页显示多少条数据。

clipboard.png

2.视图显示：之前可能我们用的都是{!! $res->render() !!} ,5.3版本之后使用links方法，结果如下：

clipboard.png

clipboard.png

是不是特别丑，别担心，laravel很人性化的给我们提供了样式，在public/css里面有个app.css文件，
我 们只需要再视图引入它就好了。

clipboard.png

<link rel="stylesheet" href="{{asset('css/app.css')}}">

clipboard.png

3.如果我们想自定义样式怎么办呢？其实也很简单，在项目下执行一条命令

php artisan vendor:publish

我们可以看下输入之后的执行过程：laravel把自带的样式拷贝到了我们项目的视图目录下面的vendor文件夹

clipboard.png

clipboard.png

可以看到vendor/pagination文件夹下面有几个视图文件，默认用的是default文件。我们只需要改动里面的代码就可以改变自己的样式，然后也可以自己定义使用其他的文件，只需要在links()方法里指定你要使用的视图文件就可以了。

clipboard.png


  • 精彩推荐

  • 2020-04-17 14:06:29

    图片解释EaseIn，EaseOut，EaseInOut

    1.EaseIn：即缓动发生在入口处，也就是刚开始的时候。 2.EaseOut：即缓动发生在出口处，也就是结束之前。 3.EaseInOut：就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录，数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键

  • 2020-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似，也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型，除了和string外，还支持hash、lists（链表）、sets（集合）和sorted sets（有序集合） Redis是可以把数据存储在磁盘上的并且使用了两种文件格式：全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘，便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis：基本配置及使用

    # Redis数据库索引（默认为0） spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码（默认为空） spring.redis.password=# 连接池最大连接数（使用负值表示没有限制） spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间（使用负值表示没有限制） spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间（毫秒） spring.redis.timeout=1000

  • 2020-04-22 10:49:10

    css按钮特效大全

    打开这个连接，你会发现很多按钮动画脚本，基本这些动画就够大家用的了。

  • 2020-04-27 09:26:49

    transform与transition区别与详解

    对元素进行移动、缩放、转动、拉长或拉伸。 方法：translate(): 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 有两个div，它们的css样式如下，transition:过渡 元素从一种样式逐渐改变为另一种的效果 有一个div，它的css样式如下：