DataTables инициируют несколько дочерних таблиц с неповрежденными columnDef. - PullRequest
Новая
       1

DataTables инициируют несколько дочерних таблиц с неповрежденными columnDef.

0 голосов
/ 08 февраля 2019

Справочная информация : у меня есть 7 DataTables, созданных с помощью цикла PHP (HTML создается непосредственно на странице, а не из AJAX или где-либо еще).В этих DataTables итогового уровня у меня есть еще 6 DataTables уровня детализации во вложенном цикле (по одному для каждой из таблиц итогового уровня - кроме одного).Они находятся в последнем столбце каждой сводной таблицы и, используя опцию responsive, я могу поместить содержимое таблиц подробностей в дочернюю строку в соответствии с https://datatables.net/examples/api/row_details.html

Проблема: Я пытаюсь инициировать каждую дочернюю (детальную) таблицу в initComplete: function(){} родительской таблицы.Кажется, он что-то делает, хотя в таблице не сохраняются какие-либо функциональные возможности библиотек DataTables (например, ширина определения столбца).

Моя главная проблема заключается в том, что я игнорирую мои параметры DataTable (задаю ширину с помощью columnDefsв этом случае жизненно важно:

Я что-то упустил? Есть ли причина, по которой он выбирает переопределение / игнорирование ширины моих столбцов. В родительской таблице разрешены responsive и columnDefs.

См.фрагмент например: 

$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2]
    },
    {
      "className": "dt-center",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable({
        paging: false,
        autoWidth: false,
        searching: false,
        columnDefs: [
          //IGNORED????
          {
            'width': '10%',
            'targets': [0]
          },
          {
            'width': '25%',
            'targets': [1]
          },
          {
            'width': '25%',
            'targets': [2]
          },
          {
            'width': '40%',
            'targets': [3]
          },
          {
            "className": "dt-center",
            "targets": "_all"
          },
        ],
        ordering: true,
        sorting: true,
        initComplete: function() {
          console.log("SUB TABLE INIT COMPLETE");
        },
        responsive: true,
        dom: '<"clear">rt',
        order: [
          [1, 'asc']
        ]
      });
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Heading one</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Heading one</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 08 февраля 2019

То, что вы хотите сделать, по умолчанию не является частью таблиц данных, но вы можете взломать его, добавив максимум ширины для классов dtr-details и compact

$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2, 3]
    },
    {
      "className": "dt-center",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable();
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});
.dtr-details,
.compact {
  width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Heading one</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Heading one</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Также обратите внимание, что я изменил ваш 'targets': [1, 2] на 'targets': [1, 2, 3], и вам не нужны никакие параметры в дочерних таблицах данных, поскольку они выигралине принимается во внимание.

Если вы добавите идентификатор во внутреннюю таблицу, например innerTable, вы можете просто добавить этот CSS, чтобы ширина первого столбца составила 3%: 

#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
  width: 3%!important;
}


$('#summary_table').DataTable({
  paging: false,
  autoWidth: false,
  searching: false,
  columnDefs: [{
      'width': '3%',
      'targets': [0]
    },
    {
      'width': '10%',
      'targets': [1, 2, 3]
    },
    {
      "className": "dt-left",
      "targets": "_all"
    },

  ],
  initComplete: function() {
    console.log("Initialisation of table complete");
    var sub_table = $('#summary_table').find('.ic-detail-table');
    if (sub_table.length > 0) {
      var sub_table_inst = $(sub_table).DataTable();
    }
  },
  ordering: false,
  responsive: true,
  dom: '<"clear">rt',

  order: [
    [1, 'asc']
  ]
});
.dtr-details,
.compact {
  width: 100% !important;
}

#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
  width: 3% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
  <thead>
    <tr>
      <th></th>
      <th>Heading one</th>
      <th>Heading two</th>
      <th>Heading three</th>
      <th class='none'>Detail table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>cell one</td>
      <td>cell two</td>
      <td>cell three</td>
      <td>
        <table id="innerTable" class='table compact' class='ic-detail-table'>
          <thead>
            <tr>
              <th>Id</th>
              <th>Heading two</th>
              <th>Heading three</th>
              <th>Heading four</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Heading two</td>
              <td>Heading three</td>
              <td>Heading four</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JSFiddle: https://jsfiddle.net/6fp3kbnh/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...