Для удобства работы пользователя с экранной информацией, понадобилось отображение дополнительных значений "по запросу".
Поскольку DataTables без обращения к источнику информации через AJAX не умеет получать дополнительные данные, которые не были запрошены при построении страницы, - поэтому получение доп. инф-и было заложено в запрос.
Таблица данных довольно большая, поэтому я не стал добавлять в нее дополнительные значения как визуальный столбец DataTable, а сделал его скрытым и сформировал в виде подстроки, которая активируется по клику.
Здесь номер автомобиля является "кликабельным" и при щечке по нему вызывает отображение подстроки:
Для реализации такой функции необходимо:
1. Создать собственно HTML разметку таблицы:
<table id="ppost" class="hover cell-border" >
<thead>
<tr>
<th>Дата заявки</th>
<th>Перевозчик</th>
<th>Фут.<br>КТК</th>
<th>Номера <br>контейнеров</th>
<th></th>
<th>№ авто</th>
<th>ФИО водителя</th>
</tr>
</thead>
<tfoot>
<tr >
<th>Дата <br>заявки</th>
<th>Перевозчик</th>
<th>Фут.</th>
<th>№ контейнера</th>
<th>Фото<br> КТК</th>
<th>№ авто</th>
<th>ФИО водителя</th>
</tr>
</tfoot>
</table>
*В структуре задан столбец "ФИО водителя", но он будет невидим....
Здесь нет данных, поскольку за наполнение таблицы отвечает JS-скрипт, который задает характеристики, настройки и данные для отображения.
2. Настройка свойств таблицы в коде JS:
$(document).ready(function() {
var maintable = $('#ppost').DataTable({
"language": {"url": "ru.json"},
ajax: {url:"ajax/ppost_data.php"},
paging: true,
searching: true,
scrollCollapse: true,
scrollY: '600px',
scrollX: true,
fixedColumns:{ start: 9 },
lengthMenu: [50, 100, 150, 300, -1],
// этот кусок кода создает поля фильтрации на выбранных столбцах DataTable
initComplete:
function () {
this.api().columns([1,2,3,4,5,6,7,8,9,11,13,14,15,16,17,18]).every(function () {
let column = this;
let title = column.header().textContent;
let input = document.createElement('input');
input.placeholder = title;
column.header().replaceChildren(input);
input.addEventListener('keyup', () => {
if (column.search() !== this.value) {column.search(input.value).draw(); } });
});
},
// далее выполняем настройку столбцов таблицы
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [0,1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18] },
{ 'searchable': false,'targets': [0,10,12,19] },
//вот здесь объявляю столбец скрытым и присваиваю ему класс
{target: 11,visible: false,className: "details-control",searchable: false} // Ном авто,
],
// устанавливаем ширину столбцов таблицы
aoColumns : [
{ sWidth: '10px' },
{ sWidth: '10px' },.........
]
});
Основа сделана - таблица создана и наполнена данными..
Осталось реализовать отображение скрытого столбца в виде подстроки при клике по номеру автомобиля.
Итак, скрытому столбцу присвоен класс "details-control".
Описываем поведение таблицы при клике:
$('#ppost tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = maintable.row(tr);
let fio = row.data()[11];
//при скрытом столбце можно получить значение через апи по номеру столбца
console.log(fio);
// создаем подстроку для отображения в виде таблицы:
let substr = '<table border="0" style="padding-left:780px;">'+'<tr>'+
'<td>Водитель: '+fio+' </td>'+'</tr>'+'</table>';
// и описываем ее поведение
if ( row.child.isShown() ) {
row.child.hide();
tr.removeClass('shown');
}else {
row.child(substr).show();
tr.addClass('shown');}
} );
Вот и вся реализация подстроки.