lat4732's avatar
Level 12

Editing default laravel's bootstrap pagination results in an htmlspecialchars() error

Hello! I'm trying to edit the out of box laravel's bootstrap pagination design. Here is the default

        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
                </li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><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" aria-current="page"><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" aria-label="@lang('pagination.next')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>

and I'm trying to convert it into this

visualization1

I tried the following

        <div class="nav-links">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <a class="prev page-numbers disabled" href="#" aria-disabled="true">Previous</a>
            @else
                <a class="prev page-numbers" href="{{ $paginator->previousPageUrl() }}" rel="prev"
                    aria-label="@lang('pagination.previous')">&lsaquo;</a>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <span class="page-numbers current" aria-disabled="true">
                        <span class="meta-nav screen-reader-text">Page </span>{{ $element }}
                    </span>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span class="page-numbers current" aria-disabled="true">
                                <span class="meta-nav screen-reader-text">Page </span>{{ $element }}
                            </span>
                        @else
                            <a class="page-numbers" href="{{ $url }}"><span
                                    class="meta-nav screen-reader-text">Page </span>{{ $page }}</a>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <a class="next page-numbers" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">@lang('pagination.next')</a>
            @else
                <a class="next page-numbers disabled" href="#" aria-disabled="true">@lang('pagination.next')</a>
            @endif
        </div>

but it results in an error

htmlspecialchars(): Argument #1 ($string) must be of type string, array given

without specifying a specific line that triggers the error. Where could the problem be? Here is the original template pagination code that I'm trying to convert into

<nav class="navigation pagination">
                    <h2 class="screen-reader-text">Posts navigation</h2>
                    <div class="nav-links">
                        <a class="prev page-numbers" href="#">Previous</a>
                        <span class="page-numbers current">
                            <span class="meta-nav screen-reader-text">Page </span>1
                        </span>
                        <a class="page-numbers" href="#"><span class="meta-nav screen-reader-text">Page </span>2</a>
                        <a class="page-numbers" href="#"><span class="meta-nav screen-reader-text">Page </span>3</a>
                        <a class="page-numbers" href="#"><span class="meta-nav screen-reader-text">Page </span>...</a>
                        <a class="page-numbers" href="#"><span class="meta-nav screen-reader-text">Page </span>6</a>
                        <a class="next page-numbers" href="#">Next</a>
                    </div>
</nav>
0 likes
4 replies
wingly's avatar
wingly
Best Answer
Level 29

You have <span class="meta-nav screen-reader-text">Page </span>{{ $element }} change the {{ $element }} to {{ $page }}

lat4732's avatar
Level 12

@wingly Thanks a ton! And how can I implement the ... (dots) between long ranges? Example:

1 2 3 4 ... 12 13 14 15

Sinnbeck's avatar

@Laralex The 3 dots are part of the pagination links. So check the result to see where it is. It should as far as I know be this part

 @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                @endif
1 like
wingly's avatar

Well this you have already done it from what i saw in your template. Here the element is the three dots and you should leave it like it is

                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <span class="page-numbers current" aria-disabled="true">
                        <span class="meta-nav screen-reader-text">Page </span>{{ $element }}
                    </span>
                @endif

I was talking for the code block after this comment {{-- Array Of Links --}}

                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span class="page-numbers current" aria-disabled="true">
                                <span class="meta-nav screen-reader-text">Page </span>{{ $element }}
                            </span>
                        @else

Here it's wrong and should be {{ $page }} instead

1 like

Please or to participate in this conversation.