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

Add a Comment

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