elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  DataTables porqué no lo detecta
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: DataTables porqué no lo detecta  (Leído 291 veces)
oscarcaronte

Desconectado Desconectado

Mensajes: 7


Ver Perfil
DataTables porqué no lo detecta
« en: 4 Abril 2021, 12:59 pm »

Hola os paso entero el código porque no consigo que me inmobilice la columna izquierda

hice otro post pero no copié bien

script.js

Creo que no estoy llamando bien a las librerias pero no sé cómo ver donde hay un error.

Código
  1.  
  2.  
  3.  
  4. $(document).ready(function(){
  5. var dataTable = $('#personal').DataTable({
  6.  "paging": false,
  7.  
  8. "language": {
  9. "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json" },
  10. "fixedColumns":   {
  11.            leftColumns: 1
  12.        },
  13. "bFilter": false,
  14.  
  15. "bInfo": false,
  16.  "processing" : true,
  17.  "serverSide" : true,
  18. "responsive": true,
  19.  "order" : [],
  20.  "ajax" : {
  21.   url:"datos.php",
  22.   type:"POST"
  23.  }
  24.  
  25. });
  26.  
  27.  
  28.  
  29.  
  30.  
  31. $('#personal').on('draw.dt', function(){/*`Oscar``Elena``Carmen``Garijo``Nacho``Prado``Juan``Ondina``Marta``Cristobal``Angeles``Gerardo``Antonio``Gaspar``Raquel``Victor``Reyes``Vanesa`*/
  32.  $('#personal').Tabledit({
  33.   url:'edicion.php',
  34.   dataType:'json',
  35.   columns:{
  36.    identifier : [0, 'idp'],
  37. editable:[[1, 'Oscar'], [2, 'Elena'], [3, 'Carmen'],[4, 'Garijo'],[5, 'Nacho'],[6, 'Prado'],[7, 'Juan'],[8, 'Ondina'],[9, 'Marta'],[10, 'Cristobal'],[11, 'Angeles'],[12, 'Gerardo'],[13, 'Antonio'],[14, 'Gaspar'],[15, 'Raquel'],[16, 'Victor'],[17, 'Reyes'],[18, 'Vanesa']]
  38.   },
  39.   restoreButton:false,
  40.   onSuccess:function(data, textStatus, jqXHR)
  41.   {
  42.    if(data.action == 'delete')
  43.    {
  44.     $('#' + data.idp).remove();
  45.     $('#personal').DataTable().ajax.reload();
  46.    }
  47.   }
  48.  });
  49. });
  50.  
  51. });
  52.  

index.php

Código
  1. <html>
  2. <head>
  3.  <title>Cuadrante de Visitas</title>
  4.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  5.  
  6.  
  7.  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
  8.  <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
  9.  
  10. <script type="text/javascript" src="DataTables/datatables.min.js"></script>
  11.  
  12. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
  13.  
  14.  
  15.  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  16.  
  17.  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  18.  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  19.  <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
  20. </script>
  21.  
  22. <script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
  23. </head>
  24. <body>
  25.  <div class="container">
  26.   <h3 align="left">Cu Visit</h3>
  27.   <br />
  28.   <div class="panel panel-primary">
  29.    <div class="panel-heading">Anem a més</div>
  30.    <div class="panel-body">
  31.     <div class="table-responsive">
  32.      <table id="personal" class="table table-bordered table-striped">
  33.       <thead class="fixedHeader">
  34.  
  35.        <tr>
  36.         <th>ID</th>
  37.         <th>Osc</th>
  38.         <th>El</th>
  39.         <th>Carmen</th>
  40.                  <th>Gar</th>
  41.                    <th>Na</th>
  42.         <th>Pra</th>
  43.         <th>Juan</th>
  44.           <th>On</th>
  45.         <th>Marta</th>
  46.         <th>Cris</th>
  47.           <th>Angeles</th>
  48.         <th>Gerardo</th>
  49.         <th>Antonio</th>
  50.           <th>Gaspar</th>
  51.         <th>Raq</th>
  52.         <th>Vic</th>
  53.           <th>Re</th>
  54.         <th>Vanesa</th>
  55.  
  56.        </tr>
  57.       </thead>
  58.       <tbody></tbody>
  59.      </table>
  60.     </div>
  61.    </div>
  62.   </div>
  63.  </div>
  64.  <br />
  65.  <br />
  66. </body>
  67. </html>
  68.  
  69. <script type="text/javascript" language="javascript" src="script.js"></script>
  70.  
  71.  
  72.  
  73.  




En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 1.716



Ver Perfil
Re: DataTables porqué no lo detecta
« Respuesta #1 en: 5 Abril 2021, 20:33 pm »

Activa el scrollX sino no hay barra de desplazamiento para propia tabla y por ende no hay fixedColumns

Código
  1. $('#personal').DataTable({
  2.  scrollX: true,
  3.  fixedColumns: {
  4.    leftColumns: 1
  5.  }
  6. });


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines