Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables

Pregunta:


Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con jQuery al input que tiene el id “tipo_venta2” de footer del datatable, pero no me resulta, me gustaría saber cómo lo tendría que hacer. ¿Cómo sería la forma correcta de hacerlo?

Aquí muestro el ejemplo mínimo, completo y ejecutable:

$(document).ready(function () {

  var table_ = $('#table_').DataTable({
    "scrollY": "300px",
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "columns": [
      { "width": "5%" },
      { "width": "5%" },
      { "width": "8%" },
      { "width": "6%" },
      { "width": "8%" },
      { "width": "39%" },
      { "width": "8%" },
      { "width": "8%" },
      { "width": "5%" },
      { "width": "8%" }
    ],
    fixedHeader: {
      header: true,
      footer: true
    }
  });

  $("#test").click(function (e) {
    e.preventDefault();
    $('#table_ tfoot th input[id=tipo_venta2]').val("valor a  copiar de prueba");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<input id="test"  type="submit" value="test" />

<table id="table_" class="table table-striped table-bordered" style="margin-bottom: 0 !important;">
  <thead>
    <tr style="background-color: #ff6a00; color: #fff">
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th style="border:0 !important;border-collapse:separate !important;" colspan="6">
        <input type="text" class="form-control_tablegrande" id="tipo_venta2" placeholder="VENTAS">
      </th>
      <th style="border:0 !important;border-collapse:separate !important; text-align:right"><span style="font-weight:normal !important;vertical-align:middle">Totales Iguales</span></th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
      <th style="border:0 !important;border-collapse:separate !important;"> </th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Me he dado cuenta que el problema ocurre cuando defino "scrollY": "300px", que me impide que copie datos al input del footer. Como se puede ver en el siguiente código que funciona sin problemas al comentar esa línea:

$(document).ready(function () {

  var table_ = $('#table_').DataTable({
    //"scrollY": "300px",
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "columns": [
      { "width": "5%" },
      { "width": "5%" },
      { "width": "8%" },
      { "width": "6%" },
      { "width": "8%" },
      { "width": "39%" },
      { "width": "8%" },
      { "width": "8%" },
      { "width": "5%" },
      { "width": "8%" }
    ],
    fixedHeader: {
      header: true,
      footer: true
    }
  });

  $("#test").click(function (e) {
    e.preventDefault();
    $('#table_ tfoot th input[id=tipo_venta2]').val("valor a  copiar de prueba");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<input id="test"  type="submit" value="test" />

<table id="table_" class="table table-striped table-bordered" style="margin-bottom: 0 !important;">
  <thead>
    <tr style="background-color: #ff6a00; color: #fff">
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th style="border:0 !important;border-collapse:separate !important;" colspan="6">
        <input type="text" class="form-control_tablegrande" id="tipo_venta2" placeholder="VENTAS">
      </th>
      <th style="border:0 !important;border-collapse:separate !important; text-align:right"><span style="font-weight:normal !important;vertical-align:middle">Totales Iguales</span></th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
      <th style="border:0 !important;border-collapse:separate !important;"> </th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

¿Por qué ocurre el error cuando pongo ese atributo en la configuración?¿Cómo puedo hacer que me funcione en ambos casos sin problemas?

Preguntado por: Danilo

JuankGlezz

Lo que hace datatables es descomponer tu tabla para asignar un modelo que separe thead tbody y tfoot esto por lo regular ocurre cuando se le asigna un scrollY entonces no funciona porque tu tfoot esta fuera de la tabla.

Si revisas con el inspector de código del navegador(f12) te darás cuenta, entonces tu elemento para asignar un valor al input quedaría de la siguiente forma:

$("#test").click(function (e) {
    e.preventDefault();
    $('#table__wrapper input#tipo_venta2').val("valor a  copiar de prueba");
});

Te dejo tu código completo con la modificación

$(document).ready(function () {

  var table_ = $('#table_').DataTable({
    "scrollY": "100px",
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "columns": [
      { "width": "5%" },
      { "width": "5%" },
      { "width": "8%" },
      { "width": "6%" },
      { "width": "8%" },
      { "width": "39%" },
      { "width": "8%" },
      { "width": "8%" },
      { "width": "5%" },
      { "width": "8%" }
    ],
    fixedHeader: {
      header: true,
      footer: true
    }
  });

  $("#test").click(function (e) {
    e.preventDefault();
    $('#table__wrapper input#tipo_venta2').val("valor a  copiar de prueba");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<input id="test"  type="submit" value="test" />

<table id="table_" class="table table-striped table-bordered" style="margin-bottom: 0 !important;">
  <thead>
    <tr style="background-color: #ff6a00; color: #fff">
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th style="border:0 !important;border-collapse:separate !important;" colspan="6">
        <input type="text" class="form-control_tablegrande" id="tipo_venta2" placeholder="VENTAS">
      </th>
      <th style="border:0 !important;border-collapse:separate !important; text-align:right"><span style="font-weight:normal !important;vertical-align:middle">Totales Iguales</span></th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
      <th style="border:0 !important;border-collapse:separate !important;"> </th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

El problema ocurre porque cuando usas el parámetro scrollY, el plugin de los DataTables origina varios contenedores y tablas diferentes para crear la ilusión de espacio que se indica en scrollY, y copia el contenido del footer a esos nuevos contenedores, entonces tu selector en jQuery deja de funcionar correctamente.

$('#table_ tfoot th input[id=tipo_venta2]').val("valor a  copiar de prueba");

O mejor dicho, sí funciona correctamente, pero no es el elemento que esperabas que seleccionara (el que está en el nuevo footer), sino el original (que está escondido en el footer original).

Una posible solución sería usar clases, de este modo TODAS las copias del input se le asignará el valor indicado (en lugar de sólo a la primera que se encuentre como ocurría con el id):

$('.tipo_venta2').val("valor a  copiar de prueba");

Y ya funcionará como puedes ver en este ejemplo:

$(document).ready(function () {

  var table_ = $('#table_').DataTable({
    "scrollY": "300px",
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "columns": [
      { "width": "5%" },
      { "width": "5%" },
      { "width": "8%" },
      { "width": "6%" },
      { "width": "8%" },
      { "width": "39%" },
      { "width": "8%" },
      { "width": "8%" },
      { "width": "5%" },
      { "width": "8%" }
    ],
    fixedHeader: {
      header: true,
      footer: true
    }
  });

  $("#test").on("click", function (e) {
    e.preventDefault();
    $('.tipo_venta2').val("valor a  copiar de prueba");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<input id="test"  type="submit" value="test" />

<table id="table_" class="table table-striped table-bordered" style="margin-bottom: 0 !important;">
  <thead>
    <tr style="background-color: #ff6a00; color: #fff">
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
      <th>dat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th style="border:0 !important;border-collapse:separate !important;" colspan="6">
        <input type="text" class="form-control_tablegrande tipo_venta2" id="tipo_venta2" placeholder="VENTAS">
      </th>
      <th style="border:0 !important;border-collapse:separate !important; text-align:right"><span style="font-weight:normal !important;vertical-align:middle">Totales Iguales</span></th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
      <th style="border:0 !important;border-collapse:separate !important;"> </th>
      <th style="border:0 !important;border-collapse:separate !important;"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Fuente

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Evitar múltiples toggle con misma clase – javascript
Pregunta: Para un evento toggle con puro javascript lo desarrollo de la siguiente forma: Javascript // Esta clase lo expande. const expandButton = document.querySelector('.expand-button'); expandButton.addEventListener('click', ()=> { ...
Validación de datos nulos en una función – javascript
Pregunta: Tengo la siguiente función pero al momento validar todos mis datos me los registra todos a excepción del los "containers" que son grids y ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Actualizar información con ajax php mysql – php jquery mysql
Pregunta: Tengo esta simple consulta que lo que simplemente me muestra las visitas de la web, pero quisiera que fuera automático con ajax ya que ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Uso de js y c# en unity. ¿Igual rendimiento? – javascript c# unity3d
Pregunta: Estoy comenzando con unity . Y veo que se pueden usar c# y js para programar. Mi pregunta es si tanto c# como js ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Agregar marcador especifico a una localización Google Maps – javascript google-maps
Pregunta: ¿Cómo podría añadir un marcador personalizado en Google maps? Actualmente el código que tengo es el siguiente: var locations = [ ['Bondi Beach', -33.890542, ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
convertir array a Map en javascript – javascript map nodejs
Pregunta: quiero convertir un arreglo a Map(), en este console "console.log(arrayParaMap);" sale undefined el ejemplo que uso es este //example {a:1,a:2,a:1,b:1,b:5,b:6} el map que prentendo obtener es ...
como iterar un objeto en nodejs – javascript nodejs
Pregunta: Hice esta función: const obj = ; const objMapped = obj.reduce((acc, item) => { ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *