Answers

• allan Posts: 64,517Questions: 1Answers: 10,664 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: 6Questions: 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,517Questions: 1Answers: 10,664 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
• mvillarreal Posts: 6Questions: 2Answers: 0

  May 18

  I fixed the problem. If you put "datatable" in the id of the table, the datatable gets initialized automatically, therefor everytime you use it in JavaScript it gives you the warning.

  I removed the "datatable" from the id and assign another name like "purchases" or "orders"or whatever and the in JavaScript I initialize the datatable doing this:

  $(document).ready(function() {
       $('#dt_flujo_trabajo').DataTable({
           order: []
       });
  });
  

  In that way I can refer to the table by id without getting the annoying warning message.

  Thanks for you help.
• allan Posts: 64,517Questions: 1Answers: 10,664 Site admin

  May 18

  There must be something else on your page that is doing that initialisation. DataTables doesn't automatically do initialisation on a page, regardless of what id the table has.

  Allan