Home > Mobile >  Laravel Livewire Pagination Result Disappear After Clicking Next Page/Page Number
Laravel Livewire Pagination Result Disappear After Clicking Next Page/Page Number

Time:12-15

i've been searching for a question like the one above but i can't find one, so i'm gonna make one

My problem is, when i make a very simple pagination with Laravel Livewire, the first page appear just fine, but when i click "Next Page/Page Number", the result just disappear, even though there are still more results to show, i'm absolutely got no idea, no mattter how i try.

As you can see, the simple pagination work just fine, there is next and previous button and a very big next and previous picture below

But the moment i click next page or page number, the result just disappear, the total number of result even go to 0

Here is my Component code:

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Http\Request;
use DB;
use Livewire\WithPagination;

class Category extends Component
{   
    use WithPagination;
    public function render(Request $request)
    {   
        $id = $request->id;

        $product_count = DB::table('product')->where('category_id', $id)->count();

        $page = $request->page ?? 1;

        $product_all = DB::table('product')->where('category_id', $id)->paginate(3);

        return view('livewire.category',[
            'product_all' => $product_all,
            'product_count' => $product_count,
            'page' => $page,
        ]);
    }
}

Here is my view code:

<div >
    @foreach ($product_all as $product)
    <div >
        @php
            product($product);
        @endphp
    </div>
    @endforeach   

    <!-- PAGINATION START -->
    @if ($product_all instanceof \Illuminate\Pagination\LengthAwarePaginator)
    {{ $product_all->links() }}
    @endif
    <!-- PAGINATION END -->
</div>

And a small notice, i try pagination(just normal laravel pagination) without livewire and it work perfectly fine, that's why i am really clueless of what is happening

I have already include the livewire @livewireStyles and @livewireScripts, and i can't find an answer anywhere else cause i don't see any question that match my problem, and i'm kinda new to livewire

CodePudding user response:

I think your problems is related with the request parameter on the render method of the livewire component, once livewire on rerender can't access the request value, until next browser refresh.

public function render(Request $request)

instead, use livewire properties to bind the id and page with values livewire can read on rerenders

@livewire('some-component', ['category_id' => $parent_category_id, 'page' => $parent_page_value])

Like above, livewire bind this values to self properties and read from them on rerender

public $category_id, $page;

public function render()
{
   $product_count = DB::table('product')->where('category_id', $this->category_id)->count();
   $product_all = DB::table('product')->where('category_id', $this->category_id)->paginate(3);

   return view('livewire.category',[
      'product_all' => $product_all,
      'product_count' => $product_count,
      'page' => $this->page,
   ]);
}
  • Related