Issue with Datatable-Livewire | how to solve the problem?

[desyashasyi]

I used Datatables adminLTE plugin to present table in Livewire component/view. However, the feature of Livewire allow refresh page without reload all page. Hence, I user $refresh or wire:poll. But this command made a problem, that is the table row disappear. How to solve the problem?

Here is My code;

Livewire Controller

<?php

namespace App\Http\Livewire\Timetable\Subject;

use Livewire\Component;
use App\Models\Subject;
use Auth;

class Home extends Component
{
    protected $listeners = ['refreshSubjectIdx' => '$refresh'];
    public $heads;
    public $config;
    public function render()
    {

        $this->heads = [
            ['label' => 'Code', 'width' => '1'],
            ['label' => 'Name', 'width' => '40'],
            ['label' => 'Credit', 'width' => '1'],
            ['label' => 'Semester', 'width' => '1'],
            ['label' => 'Teacher', 'width' => '5'],

        ];

        $this->config = [

        ];
        $subjectData = array();
        $subjects = Subject::where('program_id', Auth::user()->faculty->program_id)->get(); 
        foreach ($subjects as $subject) {
            $subjectData[] = [
                $subject->code,
                $subject->name,
                $subject->credit,
                $subject->semester,
                null,
            ];
        }
        $this->config['data'] = $subjectData;

        return view('livewire.timetable.subject.home');
    }
}

Livewire View

<div wire:ignore.self>
    @section('plugins.Datatables', true)
    @section('plugins.DatatablesPlugin', true)
    @section('plugins.BsCustomFileInput', true)

    <div class="row">
        <div class="col-md-4 offset-md-0">
            <x-adminlte-button data-toggle="modal" data-target="#importSubject" label="Import Subject" theme="dark" icon="fas fa-upload"/>
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-md-12 offset-md-0">
        <x-adminlte-datatable id="table8" :heads="$heads" head-theme="dark" class="bg-teal" :config="$config"
        striped hoverable with-buttons/>
        </div>
    </div>
   <div>
       @livewire('timetable.subject.import')
   </div>
</div>

View before $refresh or wire:poll

View using $refresh or wire:poll

Thank you

[dfsmania]

@desyashasyi Have you tried setting the destroy config to the set of datatables configuration:

$this->config = [];
$subjectData = array();
$subjects = Subject::where('program_id', Auth::user()->faculty->program_id)->get(); 

foreach ($subjects as $subject) {
    $subjectData[] = [
        $subject->code,
        $subject->name,
        $subject->credit,
        $subject->semester,
        null,
    ];
}

$this->config['data'] = $subjectData;
$this->config['destroy'] = true;  // <= THIS ONE!

Since the page is not fully reload, I believe this option may be necessary...

[desyashasyi]

@Shidersz, Thank you very much... I will try this way.

[desyashasyi]

@Shidersz, I have implemented $this->config['destroy'] = true;, however it is still disappear when I call to refresh page.

[dfsmania]

@desyashasyi Have you tried removing plugin including sentences from the component's view and move they to the parent view?

<div wire:ignore.self>
    {{-- THESE SENTENCES SHOULD BE ON PARENT VIEW, NOT ON THE COMPONENT VIEW DEFINITION --}}
    @section('plugins.Datatables', true)
    @section('plugins.DatatablesPlugin', true)
    @section('plugins.BsCustomFileInput', true)
    ...
</div>

[dfsmania]

Closed because no feedback, reopen in case you need more help...

[francisnnumbi]

This issue still persists. Is there a solution yet ?