分页样式
分页模板代码
@if ($paginator->hasPages()) <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled"><span class="page-link">第一页</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">上一页</a></li> @endif {{-- Pagination Elements --}} @foreach ($elements as $element) {{-- "Three Dots" Separator --}} @if (is_string($element)) <li class="page-item disabled"> <span class="page-link">{{ $element }}</span></li> @endif {{-- Array Of Links --}} @if (is_array($element)) @foreach ($element as $page => $url) @if ($page == $paginator->currentPage()) <li class="page-item active"> <span class="page-link">{{ $page }}</span></li> @else <li class="page-item"> <a class="page-link" href="{{ $url }}"> {{ $page }}</a></li> @endif @endforeach @endif @endforeach {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">下一页</a></li> @else <li class="page-item disabled"><span class="page-link">最后一页</span></li> @endif </ul> @endif
分页前端样式CSS代码
.pagination { height: 50px; margin-top: 50px; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; width: 100%; margin-bottom: 20px; } .pagination > li { display: inline } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: 10px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: none; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px } .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover { color: #23527c; background-color: #eee; border-color: #ddd } .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { z-index: 2; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7 } .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; border: none; } .pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; font-size: 18px } .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-top-left-radius: 6px; border-bottom-left-radius: 6px } .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px } .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; font-size: 12px } .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .page-link{ margin-left: 10px; border-radius:50%; }