How can I get rid of this Warning

mvillarreal

DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

allan

How can I get rid of this Warning

Don't reinitialise the DataTable .

You are going to have to give us more information if we're going to be able to help though. At least show the code you are using, or, must better, link to a test case showing the issue, per the template text for a new forum post.

Allan

mvillarreal

Thanks for your response.

Let's take this code.

@extends("admin.admin_master")

@section("admin")

<div class="page-content">

    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">

            <div class="col-12">

                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Usuarios</h4>
                </div>

            </div>

        </div>

        <!-- end page title -->

        <div class="row">

            <div class="col-12">

                <div class="card">

                    <div class="card-body">

                        <a class="btn btn-primary waves-effect waves-light" style="float: right" href="{{ route("user.add") }}"><i class="fas fa-plus me-2"></i>Agregar Usuario</a>    

                        </br>

                        <h4 class="card-title mb-4">Todos los Usuarios</h4>

                        <div class="table-responsive">

                            <table id="datatable" class="table  nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">

                                <thead class="table-light">

                                    <tr>
                                        <th width="20px">Id</th>
                                        <th class="text-center" width="50px">Avatar</th>
                                        <th width="100px">usuario</th>
                                        <th>Nombre</th>
                                        <th>Empresa</th>
                                        <th>Puesto</th>
                                        <th>email</th>
                                        <th>Ultimo Login</th>
                                        <th class="text-center" width="50px">Estatus</th>
                                        <th width="50px">Acciones</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    @foreach ($users as $item)

                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td class="d-flex justify-content-center align-items-center"><img class="rounded-circle avatar-sm" src="{{ (!empty($item->fileData->file_data)) ? "data:image/png;base64," . base64_encode($item->fileData->file_data) : url('upload/no_image.jpg') }}" alt="Avatar"></td>
                                            <td>{{ $item->username }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td>{{ $item->empresa->razon_social }}</td>
                                            <td>{{ $item->puesto }}</td>
                                            <td>{{ $item->email }}</td>
                                            <td>{{ $item->last_login ?? "No Disponible" }}</td>
                                            <td class="text-center">

                                                @if ($item->estatus_id == ESTATUS_ACTIVO)
                                                    <div class="font-size-13"><i class="ri-checkbox-blank-circle-fill font-size-10 text-success align-middle me-2"></i>Activo</div>
                                                @else
                                                    <div class="font-size-13"><i class="ri-checkbox-blank-circle-fill font-size-10 text-danger align-middle me-2"></i>Inactivo</div>
                                                @endif

                                                @if ($item->login_blocked)
                                                    <span class="" title="Usuario Bloqueado"><i class="fas fa-ban"></i></span>
                                                @endif

                                                @if ($item->twofa_enabled)
                                                    <span class="" title="2FA Activada"><i class="fas fa-user-lock"></i></span>
                                                @endif

                                            </td>
                                            <td>
                                                <a href="{{ route("user.edit", $item->id) }}" class="font-size-18 text-secondary" title="Modificar"><i class="fas fa-edit"></i></a>
                                            </td>
                                        </tr>

                                    @endforeach

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div> <!-- end col -->

        </div> <!-- end row -->

    </div> <!-- container-fluid -->

</div>

<script>

    $(document).ready(function() {

        // Retrieve saved page length from localStorage
        var savedLength = localStorage.getItem('datatable_length') || 10; // Default to 10

        var table = $('#datatable').DataTable({
            pageLength: parseInt(savedLength), // Apply saved length
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]] // Define available options
        });

        // Save the selected page length when changed
        $('#datatable_length select').on('change', function() {
            localStorage.setItem('datatable_length', $(this).val());
        });

    });

</script>

@endsection

I'm just doing some java-script to save the number of list item in the table.

I'm not reinitializing anything I'm just using the table to get the current value to store it.

In this code I get the Warning message.

DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

How can i get the instance without "reinitializing" it?

BTW, the code works fine. Do what I wanted to do, but it gives me the message.

allan

Is that code being loaded more than once on the page, or through some kind of hot reloading (the latter is what I would guess is happening)?

If so do:

if (! DataTable.isDataTable('#datatable')) {
  // Isn't a DataTable, so initialise it...
}

Or if it is hot reloading, you might need to do:

if (DataTable.isDataTable('#datatable')) {
  $('#datatable').DataTable().destroy();
}

// Initialise a new one

If that doesn't help, please link to a test case showing the issue.

Allan