Я использую отзывчивые данные с 7 столбцами. Смотрите его вживую в своем шаблоне (это большая таблица): http://darasu.xyz/DatatableExample/datatable-ex.html
Тот, который я использую, отсюда:
https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html
Я хочу, чтобы все столбцы всегда отображались на рабочих столах. Для этого есть допустимое пространство, плюс мне не нравятся расширяемые кнопки «+», отображаемые по умолчанию.
Кажется, что только 6 столбцов могут проходить через. Седьмой форсирован своим собственным расширяемым рядом, как и должно быть, если смотреть на меньшие порты просмотра. Как сделать все строки видимыми при просмотре на рабочих столах, но при этом реагировать на меньшие порты просмотра? Является ли 6 столбцов значением по умолчанию в jQuery datatables? Если это так, могу ли я изменить его на 7 и как?
Прочитав документацию с датированными данными, я попробовал различные классы для изменения точек останова, как показано здесь: https://datatables.net/extensions/responsive/classes
Это было проблемой, так как после того, как я получаю желаемую таблицу на рабочих столах, таблица адаптирует поведение в меньших портах просмотра, которые я не хочу. Пример: класс "all" заставит 7-й столбец быть видимым на всех экранах, что мне не нужно. «min-desktop» заставит 7-й столбец быть видимым на рабочих столах или больше, но будет скрывать другой столбец для компенсации. То же самое можно сказать и о других классах точек останова или параметрах приоритета данных: https://datatables.net/extensions/responsive/priority
Чем больше я использую эти опции для получения желаемой таблицы рабочего стола, тем хуже она выглядит при меньших портах просмотра.
Я попробовал обходные пути, такие как принудительное отображение всех данных:
$(document).ready(function() {
var table = $('#condolistings').DataTable( {
responsive: {
details: false
}
} );
Затем назначаем классы начальной загрузки таблицы, которые скрывают мою таблицу в меньших портах просмотра: "d-none d-xl-block d-lg-block", затем добавляем вторую отзывчивую таблицу, которая скрывается на рабочих столах с классами: "d -lg-none d-xl-none ". Это сработало, но мои границы были визуально искажены классами "блоков", поэтому он не может быть использован. (См .: https://i.imgur.com/hIfHUfz.png)
Код:
<table id="condolistings" class="table table-bordered datatable-font nowrap" style="width:100%;">
<thead>
<tr>
<th><strong>Unit</strong></th>
<th><strong># Bed</strong></th>
<th><strong># Bath</strong></th>
<th><strong>Sq Ft</strong></th>
<th><strong>Price</strong></th>
<th><strong>Brokerage</strong></th>
<th><strong>Favourite?</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>#703</td>
<td>2</td>
<td>2</td>
<td>743</td>
<td>$628,000</td>
<td>Luxmore Realty</td>
<td><a class="colored-link" href="#">Add</a></td>
</tr>
<tr>
<td>#602</td>
<td>2</td>
<td>2</td>
<td>827</td>
<td>$649,000</td>
<td>Macdonald Realty Westmar</td>
<td><a class="colored-link" href="#">Add</a></td>
</tr>
<tr>
<td>#1502</td>
<td>2</td>
<td>2</td>
<td>1103</td>
<td>$849,000</td>
<td>Coldwell Banker Westburn Rlty</td>
<td><a class="colored-link" href="#">Add</a></td>
</tr>
<tr>
<td>#1701</td>
<td>3</td>
<td>2</td>
<td>1265</td>
<td>$978,000</td>
<td>Regent Park Realty Inc.</td>
<td><a class="colored-link" href="#">Add</a></td>
</tr>
<tr>
<td>#2402</td>
<td>3</td>
<td>3</td>
<td>1637</td>
<td>$1,308,000</td>
<td>RE/MAX Central</td>
<td><a class="colored-link" href="#">Add</a></td>
</tr>
</tbody>
</table>
$(document).ready(function() {
var table = $('#condolistings').DataTable( {
responsive: true,
"paging": false,
"searching": false,
"info": false
} );
new $.fn.dataTable.FixedHeader( table );
} );
CSS-файлы, извлеченные из Bootstrap 4.