moritz99's avatar

Database dashboard with auto refresh and pagination

Hi, I have a project with several database tables and want to create a dashboard showing 4 tables with individual pagination. This dashboard should refresh every 10 seconds automatically without any user interaction and should also increase every page number on those tables. So far I have achieved both pagination and auto refresh with jumping to the next page. The only problem now is, that at the last page, my code counts to infinity and won't jump back to page one. Any ideas on how to solve this problem the best way?

in my livewire blade:
<div wire:poll.10s="goToNextPageAction ">
        <table>
        </table>
</div>
​
in my controller:
class Dashboard extends Component
{
    use WithPagination;

    public function goToNextPageAction()
    {
        $this->nextPage('table1');
    }

    public function render()
    {
        return view('livewire.dashboard', [
            'participants' => Participant::paginate(10, ['*'], 'table1')
        ]);
    }
}
​
thx for help
0 likes
5 replies
newbie360's avatar

@moritz99 You means auto rotate the page of pagination ever 10 sec?

page 1 >  2 >  3 >  1 >  2 > 3

class Dashboard extends Component
{
    use WithPagination;
    
    public $hasMorePages = false;

    public function goToNextPageAction()
    {
        if ($this->hasMorePages)
        {
            $this->nextPage();
        }
        else
        {
            $this->resetPage();
        }
    }

    public function render()
    {
        $participants = Participant::paginate(10, ['*'], 'table1');
        
        $this->hasMorePages = $participants->hasMorePages();

        return view('livewire.dashboard', [
            'participants' => $participants
        ]);
    }
}
moritz99's avatar

@newbie360 thanks, that's what I want to achieve. But your way does not work for me. If I just have data for one page, it stays static and just refreshes as wanted. But if I have multiple pages, the counter in the URL increases every evolution by one until infinity without moving to the next page.

moritz99's avatar

In the end, the version from @newbie360 worked fine for me with the addition of "'table1'" in the $this->nextpage():

class Dashboard extends Component
{
    use WithPagination;
    
    public $hasMorePages = false;

    public function goToNextPageAction()
    {
        if ($this->hasMorePages)
        {
            $this->nextPage('table1');
        }
        else
        {
            $this->resetPage('table1');
        }
    }

    public function render()
    {
        $participants = Participant::paginate(10, ['*'], 'table1');
        
        $this->hasMorePages = $participants->hasMorePages();

        return view('livewire.dashboard', [
            'participants' => $participants
        ]);
    }
}

Please or to participate in this conversation.