Копировать стоимость в неудар в лунку, который внутри footer datatable

Я использую DataTables jQuery и встречаюсь со следующей проблемой: когда я нажимаю на кнопку, я нуждаюсь в том, чтобы переместить его стоимость с jQuery в неудар в лунку, который есть у id "tipo_venta2" footer datatable, но он не следует мне, нравился бы мне знать, как он был бы должен делать это. Каким был бы правильный способ это делать?

Здесь я показываю минимальный, полный и выполнимый пример:

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

Я понял, что проблема происходит, когда я определяю "scrollY": "300px", что мешает мне копировать данные в неудар в лунку footer. Поскольку возможно быть видно в следующем коде, что оно функционирует без проблем, прокомментировав эту линию:

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

Почему происходит ошибка, когда я помещаю этот признак в конфигурацию? Как я могу способствовать тому, чтобы оно я функционировало в обоих случаях без проблем?

1
задан 31.05.2017, 20:53
2 ответа

То, что он делает datatables он состоит в том, чтобы разлагать твою таблицу, чтобы распределять модель, которую он отделял бы thead tbody и tfoot это как правило происходит, когда ему распределяется один scrollY тогда оно не функционирует, потому что ты tfoot эта вне таблицы.

Если ты проверишь с инспектором кода браузера (f12), ты поймешь, тогда твой элемент, чтобы распределять стоимость в input он остался бы следующей формы:

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

Я оставляю тебе твой полный код с изменением

$(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>
2
ответ дан 24.11.2019, 13:27

Проблема происходит, потому что, когда ты используешь параметр scrollY, plugin DataTables порождает несколько контейнеров и различных подмостков, чтобы создавать иллюзию места, которое показывается в scrollY, и скопируй контент footer в эти новые контейнеры, тогда твой селектор в jQuery прекращает функционировать правильно.

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

Или скорее, да функционируй правильно, но это не элемент, что ты надеялся, что он выбирает (того, который находится в новом footer), а оригинал (который спрячется в первоначальном footer).

Возможное решение состояло бы в том, чтобы использовать классы, таким образом ВСЕ копии inputему будет распределена указанная стоимость (вместо только в первую, которая будет находиться, как он происходил с id):

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

И уже оно будет функционировать, как ты можешь видеть в этом примере:

$(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>
1
ответ дан 24.11.2019, 13:27

Теги

Похожие вопросы