laravel 8 翻页ajax实现方式
参考链接：https://www.zhiqiexing.com/106.html
未进行带参数翻页测试，请自行测试。
1、先在项目下执行：php artisan vendor:publish –tag=laravel-pagination
然后修改默认的翻页样式。我修改的是\resources\views\vendor\pagination\tailwind.blade.php 这个文件。
|
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 |
@if ($paginator->hasPages()) <div class="pagination-wrap"> <ul class="ajax-page"> @if ($paginator->onFirstPage()) <li class="prev"><a href="#"><i class="fas fa-long-arrow-alt-left"></i> Prev</a></li> @else <li class="prev"><a href="{{ $paginator->previousPageUrl() }}"><i class="fas fa-long-arrow-alt-left"></i> Prev</a></li> @endif @if($paginator->currentPage() > 3) <li><a href="{{ $paginator->url(1) }}">1</a></li> @endif @if($paginator->currentPage() > 4) <li><a href="#">...</a></li> @endif @foreach ($paginator->getUrlRange(1, $paginator->lastPage()) as $key=>$value) @if($key >= $paginator->currentPage() - 2 && $key <= $paginator->currentPage() + 2) @if ($key == $paginator->currentPage()) <li class="active"><a href="#">{{ $key }}</a></li> @else <li><a href="{{ $value }}">{{ $key }}</a></li> @endif @endif @endforeach @if($paginator->currentPage() < $paginator->lastPage() - 3) <li><a href="#">...</a></li> @endif @if($paginator->currentPage() < $paginator->lastPage() - 2) <li><a href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li> @endif @if ($paginator->hasMorePages()) <li class="next"><a href="{{ $paginator->nextPageUrl() }}">Next <i class="fas fa-long-arrow-alt-right"></i></a></li> @else <li class="next"><a href="#">Next <i class="fas fa-long-arrow-alt-right"></i></a></li> @endif </ul> </div> @endif |
页码效果
html模板部分比较简单：
模板html
productCollectTable.php的代码：
|
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 |
<!-- 产品 list --> <div class="table-responsive-xl"> <table class="table mb-0"> <thead> <tr> <th>序号</th> <th>服务商</th> <th>用户名</th> <th>产品编号</th> <th>状态</th> <th>提交日期</th> </tr> </thead> <tbody> @foreach ($collects as $collect) <tr> <td>{{ $collect['id'] }}</td> <td class="product-add-to-cart"> {{ $collect['provider'] }} </td> <td class="product-add-to-cart"> {{ $collect['user_id'] }} </td> <td class="product-name"> <a href="{{ $collect['collect_url'] }}" target="_blank">{{ $collect['product'] }}</a> </td> <td > <div class="switch switch-large"> @if($collect['status'] == 0) 等待处理 @endif @if($collect['status'] == 1) 处理完毕 @endif @if($collect['status'] == 2) 失败 @endif @if($collect['status'] == 3) 进入队列 @endif @if($collect['status'] == 4) 已获取内容 @endif @if($collect['status'] == 5) Token错误 @endif </div> </td> <td>{{ $collect['updated_at'] }}</td> </tr> @endforeach </tbody> </table> </div> {{ $collects->links() }} |
ajax js
|
1 2 3 4 5 6 7 |
//ajax page $('.ajax-page').find('a').each(function(e){ var page = $(this).attr('href').split('page=')[1]; $(this).removeAttr('href'); // 干掉href属性 $(this).attr("onclick", "AjaxPage(" + page + ")"); // 新增onclick事件 $(this).css("cursor","pointer"); //添加小手 }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function AjaxPage(page) { $.get("/product/collect/list",{ page: page }, function(result){ $(".ajax-table").html(result); //返回的值是链接形式，重新更替一下 //ajax page $('.ajax-page').find('a').each(function(e){ var page = $(this).attr('href').split('page=')[1]; $(this).removeAttr('href'); // 干掉href属性 $(this).attr("onclick", "AjaxPage(" + page + ")"); // 新增onclick事件 $(this).css("cursor","pointer"); //添加小手 }); }); } |
因为我是把页码也一起刷新，所以和文章顶部的不太一样。
控制器的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public function productCollectListShow(Request $request) { $collects = ProductCollect::where('user_id',$this->user_id)->paginate(5); //如果是ajax，则只返回表格+页码，否则返回整体的页面html if ($request->ajax()) { return view('table.productCollectTable', [ 'collects' => $collects ])->render(); } else { return view('profile.productCollectList',['collects'=>$collects]); } } |
页面的url是 /product/collect/list 。控制器方法中，判断是否是ajax，如果是ajax，则只返回table+页面，否则返回整个页面。
这种写法的优点是，如果不想用ajax方式，直接删除ajax的js文件即可。.
噢！评论已关闭。