Copy value to an input that is inside a footer of a datatable

Question

Copy value to an input that is inside a footer of a datatable

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I am using the jQuery DataTables and I am encountering the following problem: when I click on a button I need to pass a value with jQuery to the input that has the id "tipo_venta2" of the datatable's footer, but it does not work for me, I would like know how I should do it. What would be the right way to do it?

Here I show the minimum, complete and executable example:

$(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>

I've noticed that the problem occurs when I define "scrollY": "300px" , which prevents me from copying data to the footer input. As you can see in the following code that works without problems when commenting that line:

$(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>

Why does the error occur when I put that attribute in the configuration? How can I make it work in both cases without problems?

javascript jquery datatables

asked by Danilo 09.09.2016 в 02:39

source

2 answers

1

The problem occurs because when you use the scrollY parameter, the DataTables plugin originates several different containers and tables to create the illusion of space that is indicated in scrollY , and copies the footer content to those new containers , then your jQuery selector stops working correctly.

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

Or rather, it works correctly, but it is not the element you expected to select (the one in the new footer), but the original (which is hidden in the original footer).

One possible solution would be to use classes, in this way ALL copies of the input will be assigned the indicated value (instead of only the first one found as it happened with the id):

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

And it will work as you can see in this example:

$(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>

answered by 11.09.2016 в 03:08

Hide and Show div with Google Map Update does not update table

score 2 · Accepted Answer

What datatables does is break down your table to assign a model that separates thead tbody and tfoot this usually occurs when you assign a scrollY then it does not work because your tfoot is out of the table.

If you check with the browser code inspector (f12) you will notice, then your element to assign a value to input would be as follows:

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

I leave your complete code with the modification

$(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>