如何不用laravel的分页功能而通过vue和axios实现异步分页功能

来源:互联网 发布:管家婆数据库在哪里 编辑:程序博客网 时间:2024/05/16 12:30

如何不用laravel的分页功能而通过vue和axios实现异步分页功能

为什么认为有必要写这篇文章呢?因为自己在建构网站的时候,多次用到axios的异步获取数据,而当我用laravel的eloquent与simplePaginate()方法合用将数据传到前端的时候,很显然,在blade.html页面,你已经无法使用links()方法实现自动分页了,因此异步获取laravel的分页数据是不成功的,失效的,你必须自己去建构分页功能,除非你放弃异步获取数据。

当我放弃laravel提供的分页功能时,我首先要在controller段写下一下代码:

$users = App\User::with(['posts' => function ($query) {    $query->where('title', 'like', '%first%');}])->->offset($page)->limit(1)->get();
offset讲的是偏移量,就是说,你如果从0开始,那么就从数据的第一到最后正常读取,如果你从1开始,那么第一笔数据就被忽略了。
limit指的是你一次要拿到多少的数据,这里的1指明一次拿1行的数据。(因为我测试的时候就放了两行数据)

注意,为了要实现动态分页效果,我给了offset一个动态变量,名字叫做page。这个page会从axios传递到controller上。以下是axios的代码:


那么我就在axios的data对象中设置了一个page变量,我将这个变量通过next和previous方法传到controller。那么,我们在.blade.html上如何设置“上一页”和“下一页”呢?一下是.blade.html上的代码:


这样子,我们就实现了一个简单的通过vue和axios实现的分页功能了。

0 0
原创粉丝点击