deferLoading show no data after refreshing the page

loopers

When using deferLoading, then after refreshing the page, the table shows "No matching records found".
This is my table:

    public function html()
    {
        return $this->builder()
            ->setTableId('my-table')
            ->columns($this->getColumns())
            ->orderBy(0, 'asc')
            ->minifiedAjax()
            ->dom('Brtip')
            ->parameters([
                'autoWidth' => false,
                'processing' => true,
                'serverSide' => true,
                "deferLoading" => 10
            ])
            ->ajax([
                'type' => 'GET',
                'url' => route('myUrl')
            ])

If I remove the deferLoading then it's working

Why?

loopers

Edit: I am using Yajra DataTables, could it be that I don't even need deferLoading for that?

colin

As the reference page for deferLoading says:

it will use the data already on the page

Does your HTML table already have 10 records on the page when the DataTables is initialised? If not, then that's expected - that option says don't request records from the server at initialisation.

Colin

loopers

Then how can I make the content reload again when I reload the page without completely removing deferLoading?

kthorngren

deferLoading keeps Datatables from requesting the first page of data when Datatables initializes. It waits for a draw event to occur before requesting data from the server. Is this what you are looking for?

When using deferLoading, then after refreshing the page, the table shows "No matching records found".

When you first load the page it sounds like you have some DOM sourced rows that you want to show. Then when reloading the page the DOM sourced rows aren't there. Is this correct?

Kevin

loopers

That's exactly what's happening. But please not I am using Laravel's Yajra version if that matters.

kthorngren

When you refresh the page are you expecting the DOM to be initially loaded with table data? If so this is something with your Laravel environment. Datatables won't load the DOM table until it fetches the rows from the server.

Kevin

loopers

I do fetch the data initially and it shows up but when I then refresh it doesn't show up

kthorngren

but when I then refresh it doesn't show up

How are you refreshing?

Kevin

loopers

Pressing F5 on the keyboard or via the browser refresh button

kthorngren

I would start by debugging why the initial DOM sourced table isn't being loaded. Do you get errors in the browser's console log? It doesn't sound like Datatables is involved with the initial table loading.

Kevin

colin

Pressing F5 on the keyboard or via the browser refresh button

That's reloading the page, which gets you back to day 0. deferLoading is used when you have the first page in the DOM, so there's no need to make an Ajax request for it. It sounds like for you, just omit that option - it doesn't seem needed.

Colin

loopers

Colin and Kevin thank you.
I use defer loading because I am using Bootstrap tabs, so I have 4 different tabs in my page with 4 different data tables. If I don't use defer loading, it just loads all the 4 tables, but when I use defer loading, it loads the table only when I click on its tab. But then it breaks whenever I refresh the page. I believe it only refreshes the first table in the DOM but since I remain on the same tab then it doesn't show up

kthorngren

Thanks for the additional information about the tabs. Sounds like you are expecting Datatables to load data for the tab that is displayed when the page loads. If this is what you want then you will need to determine which tab is open and use `-api draw()~ for that Datatable.

Kevin

loopers

Thanks, I added:

'retrieve'  => true,
'deferRender' => false,
'deferLoading' => true,

//...

'initComplete' => 'function(e) {
    if(window.location.hash === "#my_bootstrap_tab") {
        this.api().ajax.reload();
      }
}',

Looks like it's working now, is it also a good solution in my case? slightly different than your suggestion