deferLoading show no data after refreshing the page

deferLoading show no data after refreshing the page

loopersloopers Posts: 17Questions: 7Answers: 0

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?

Answers

  • loopersloopers Posts: 17Questions: 7Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • loopersloopers Posts: 17Questions: 7Answers: 0
    edited February 2022

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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • loopersloopers Posts: 17Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    edited February 2022

    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

  • loopersloopers Posts: 17Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    but when I then refresh it doesn't show up

    How are you refreshing?

    Kevin

  • loopersloopers Posts: 17Questions: 7Answers: 0

    Pressing F5 on the keyboard or via the browser refresh button

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • loopersloopers Posts: 17Questions: 7Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    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

  • loopersloopers Posts: 17Questions: 7Answers: 0
    edited February 2022

    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

Sign In or Register to comment.