Livewire and refresh datatable

#1

Hi,

I display a table with datatable like this :

 <div class="table-responsive">
            <table class="table mg-b-0" id="products">
                <thead>
                    <tr>
                        <th class="wd-15p">SKU</th>
                        <th class="wd-35p">Title</th>
                        <th class="wd-25p">Quantities</th>
                        <th class="wd-25p">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $product)
                    <tr>
                        <td>{{ $product->sku }}</td>
                        <td>{{ $product->title }}</td>
                        <td>{{ $product->quantities }}</td>
                        <td>{{ number_format($product->turnover_excluded_tax, 2, ".", " ") }} &euro;</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div><!-- table-responsive -->

I would like the datatable could be refreshed by an event but the javascript in this view is not called again juste the first time. How can I do to refresh it ?

The javascript in the livewire view :

@push('after_scripts')
<script>
    $(document).ready(function () {
        $('.daterange').on('apply.daterangepicker', function (e, picker) {
            @this.set('daterange', e.target.value);
        });
        console.log('module called');
        $('#products').DataTable({
            'pageLength' : 15,
            'lengthMenu' : [ [50, 100, 300, -1], [50, 100, 300, 'All'] ],
            'language' : {
                'url' : '{{ global_asset('a/c/lib/datatables.net/i18n/fr.json') }}'
            } 
        });
    });
</script>
@endpush
#2

Anyone for this ? Maybe I should develop with the Livewire datatables but it’s a shame :wink: