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?
#test
?¿Cuándo se crea y dónde está situado el código que le asocia el evento click?¿Recibes algún error en la consola de JS?#test
en tu código?¿Y en la pregunta?¿Dónde se asocia el controlador del eventoclick
? Incluso si añado un botón como el que comentas en el JSFiddle, éste funciona sin errores, ¿Puedes crear un ejemplo mínimo, completo y verificable donde se vea el problema? Algo me dice que el problema está en cómo/dónde se asocia el controlador del eventoclick
, pero es imposible saberlo sin más información.