隨手扎
30天成爲Laravel萌新(第23天) - 頁面清單 上篇
因為重點不在於CSS,不在於Bootstrap。 其實大可以將頁面弄的很美觀。在Laravel專案資料夾中,其實有一個給
npm
使用的package.json
檔案。 不過還是來把重點放在Laravel上。
使用Pagnation前
Laravel提供一個超級簡單的方式,來處理分頁問題。不過在使用前,來看看原本要怎麼實現index()
。不但要取得頁數,並計算檢索數量,然後從資料庫透過offset()
、linit()
的方式取得資料。
public function index(Request $request)
{
$offset = $request->query("offset", 0);
$limit = $request->query("limit", 30);
$page = $request->query("page");
if($page){
$offset = ($page - 1) * $limit;
}else{
$page = ($offset / $limit) + 1;
}
$request->merge([
"offset" => $offset,
"page" => $page,
]);
$posts = BlogPost::orderBy('activity_id','ASC')
->offset($offset)
->limit($limit)
->get();
return view("blog/index",[
"posts"=>$posts,
"page"=>$page,
"total_pages" => $total_pages,
]);
}
就連頁面模板,都有些複雜…
除了文章清單連結外,下面的頁面選單列非常複雜。不但要在控制器裡計算頁面數量,並傳遞進視圖。相比起來,使用Laravel提供的Pagnation就簡單太多了。賣個關子明天說。
@extends("base",['title'=>'網誌文章'])
@section('title', '網誌文章')
@section('body')
<div class="container">
<ul>
@foreach ($posts as $post)
<li><a href="{{route("blog/post.show", ["id"=>$post->id])}}">{{ $post->title }}</a></li>
@endforeach
</ul>
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="?page={{$page-1}}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
@for($i=1; $i <= $total_pages; $i++)
<li class="page-item"><a class="page-link" href="?page={{$i}}">{{$i}}</a></li>
@endfor
<li class="page-item">
<a class="page-link" href="?page={{$page+1}}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
@endsection