$data->links() generating wrong pagination url after table component is reload

Hi, i cant figured out what is wrong with my code, that $data->links() is giving me wrong pagination urls after reloading the component when setting perPage or filtering. At first when the page is loaded the urls are good and giving me /posts?page=2 but when i change rows per Page or filter in the tabl or change sorting column, the table is reloaded correctly but the pagination links became /livewire/update?post=2, here is my code:

table-component.blade.php

#pagination

#Search Input has-

wire:model.live.debounce.300ms="search"

#TableComponent class

use WithPagination;

public $model; // Class name of the model
public $tableHeader = [];

#
public $page;

public $perPage = 5;

public $search = '';

public $sortColumn = 'created_at';

public $sortDirection = 'desc';

public function sortBy($column)
{
    if ($this->sortColumn === $column) {
        $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
        $this->sortColumn = $column;
        $this->sortDirection = 'asc';
    }
}

public function updatingPerPage()
{
    return  $this->resetPage();
}

public function updatingSearch()
{
    $this->resetPage();
}

PostTable class that extend table component

public function mount() { $this->model = Post::class; $this->tableHeader = $this->tableHeaderConfig();

}

public function delete(Post $post)
{
    $post->delete();
}

public function render(Post $post)
{
    $data = $post->search($this->search)
        ->orderBy($this->sortColumn, $this->sortDirection)
        ->paginate($this->perPage);

    return view('livewire.example.posts-list', [
        "posts" => $data
    ]);
}

protected function tableHeaderConfig()
{
    // (column, label, sortable, liveEdit, liveEditType)
    return [
        ["name" => Post::COL_TEXT, "display" => "Text", "sortable" => true],
        ["name" => Post::COL_AUTHOR_ID, "display" => "Author"],
        ["name" => Post::COL_CREATED_AT, "display" => "Vytvořeno", "sortable" => true],
        ["name" => Post::COL_UPDATED_AT, "display" => "Upraveno", "sortable" => true]
    ];
}

thanks for your advices..

kraliik6

1 year ago

Level 1

sorry for the formating the code badly .. first time posting here

bvfi-dev

1 year ago

Level 3

I believe you have to handle this yourself. What I would suggest trying is in an updatedPerPage() you make it so that the user is always re-directed to the /posts?page=1. So, everytime the user changes "per page", they get taken to the first page in a re-render. I think this is a very efficient way of solving this. Then you make a cookie or something that will remember the user's choice so that whenever they change it, it gets created/updated and lasts for a year or a session (Make sure you disclose the cookie if affected by GDPR). Now the user's choice will be remembered, so that they won't have to switch per page and get redirected to the first page everytime they have to do that. For now I would say instead of

public function updatingPerPage()
{
    return  $this->resetPage();
}

try

public function updatedPerPage()
{
    return  $this->resetPage();
}

Or if you need the "updating" function for some reason, then just add a "updated" function separately. I think this might actually fix your issue and you wont have to code a page 1 redirect. Try it and let me know what happens.

UPDATE: I also noticed you have a search thing, so answer me this: when you are on the second page and search, what happens? If you are on the 2nd page and search, does it hide the first 5 entries or not show them at all or?

Please or to participate in this conversation.