Answers

• allan Posts: 64,357Questions: 1Answers: 10,626 Site admin

  May 8

  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 Posts: 4Questions: 2Answers: 0

  May 9 edited May 9

  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 Posts: 64,357Questions: 1Answers: 10,626 Site admin

  May 9

  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