WithPagination with bootstrap 4 as paginationTheme not working as intended in livewire

Question

WithPagination with bootstrap 4 as paginationTheme not working as intended in livewire

3.2k views Asked by Kjell Dirdal At 28 September 2020 at 22:15

I have made a simple project in Laravel. I am using Livewire v^2.2.

When I add the code as described in the documentation, the previous and next buttons are dead.

The code in php Component is:

// If I comment this out, the view is horrible but is working.
   // use WithPagination;
    
        // protected $paginationTheme = 'bootstrap';
    
        public function render()
        {
            return view('livewire.users', [
                'users' => User::paginate(1),
            ]);
        }

In the template:

<div>
    <h1>Users</h1>
    <div class="list-group">
    @foreach($users as $user)

            <a href="" class="list-group-item list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{ $user->name }}</h5>
                    <small>{{ $user->created_at }}</small>
                </div>
                <p class="mb-1">{{ $user->email }}</p>
            </a>
    @endforeach
    </div>
    <br>
    {{ $users->links() }}
</div>

Original Q&A

There are 2 answers

**Kjell Dirdal** · Answer 1 · 2020-09-29 09:10:07

Kjell Dirdal On 29 September 2020 at 09:10

I found the reason why.

Livewire components MUST have a single root element.

I forgot to add the top line in the question i see.

**Abdulmajeed** · Answer 2 · 2020-09-28 23:41:49

try this

use Livewire\WithPagination;

class NameComponent extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

add this in side Livewire view

<div>
.....

    @push('scripts')
        <script>
            Livewire.restart();
        </script>
    @endpush
</div>

in layouts/app.blade.php after @livewireScripts add @stack('scripts')

<body>
    ...
    @livewireScripts
    
    @stack('scripts')
</body>

TechQA.

WithPagination with bootstrap 4 as paginationTheme not working as intended in livewire

There are 2 answers

Related Questions in LARAVEL

Related Questions in BOOTSTRAP-4

Related Questions in LARAVEL-LIVEWIRE

Popular Questions

Popular Tags

Trending Questions