Laravel 페이지 매김에 CSS를 추가하는 방법

Laravel은 학습, 사용, 확장성이 용이하고 강력한 기능을 포함하고 있어 높은 평가를 받는 인기 있는 PHP 프레임워크입니다. 그 중 페이징은 웹 애플리케이션에서 필수적인 기능 중 하나이다. 이 글에서는 Laravel에서 페이지 매김을 구현하고 CSS 스타일을 추가하는 방법을 소개합니다.

1. Laravel에서 페이징 구현

Laravel 프레임워크에서 페이징은 Paginator 클래스를 통해 구현됩니다. Paginator 클래스는 Query Builder 또는 Eloquent ORM을 사용하여 데이터베이스에서 데이터를 가져오고 페이지 크기와 현재 페이지 번호에 따라 결과를 페이지로 매깁니다. 구체적인 단계는 다음과 같습니다.

1. Paginator 클래스 소개

use Illuminate\Pagination\Paginator;

2. 데이터 검색

$data = DB::table('table_name')->paginate(5);

또는

$data = ModelName::paginate(5);

3. 데이터 표시

@foreach ($data as $item)
    //
@endforeach

{{ $data->links() }}

위 코드는 "table_name"이라는 테이블의 데이터를 검색합니다. 각 페이지를 추가합니다. 의 레코드 수는 5로 설정되고 "data"라는 변수에 저장됩니다. 뷰에서는 foreach 루프를 통해 데이터를 탐색하고 $data->links() 메서드를 통해 페이징 링크를 생성할 수 있습니다.

2. Laravel에 CSS 스타일 추가

Laravel은 페이지 매김 링크에 대한 기본 스타일을 제공합니다. 그러나 CSS를 사용자 정의하여 모양을 변경할 수 있습니다. 기본 스타일을 비활성화하려면 다음 코드를 사용하면 됩니다.

{{ $data->links('') }}

CSS 스타일을 사용자 정의하는 단계는 다음과 같습니다.

1. public/css 디렉토리에 "pagination"과 같은 새 CSS 파일을 만듭니다. .css".
2. 뷰에서 헤드 태그에 CSS 파일을 도입하여:

<link rel="stylesheet" href="{{ asset(&#39;css/pagination.css&#39;) }}" />

3. CSS 파일에 스타일 추가

.pagination li {
    display:inline-block;
    margin-right:5px;
    margin-bottom:5px;
    padding:5px 12px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:14px;
    color:#333;
    text-decoration:none;
}
.pagination .active {
    background-color:#007bff;
    border-color:#007bff;
    color:#fff;
}
.pagination .disabled {
    opacity:0.5;
    cursor:not-allowed;
}

위 스타일은 페이지 매기기 링크에 둥근 테두리를 추가하고 글꼴 크기와 색상을 설정합니다. 현재 페이지에 특정 배경색을 추가하도록 설정합니다.

3. 요약

Paginator 클래스를 사용하여 Laravel 프레임워크에서 페이지 매김을 구현하는 것은 매우 간단합니다. 페이징 스타일을 사용자 정의하는 것은 그리 어렵지 않습니다. CSS 코드만 추가하면 됩니다. 이 글이 라라벨 페이지 매김과 CSS 스타일을 사용하는데 도움이 되기를 바랍니다. 질문이나 제안 사항이 있는 경우 댓글 영역에 메시지를 남겨주시면 기꺼이 답변해 드리겠습니다.

위 내용은 Laravel 페이지 매김에 CSS를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!