{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":130,"style":"BOLD"},{"length":4,"offset":184,"style":"BOLD"}],"text":"Для удобства работы пользователя с экранной информацией, понадобилось отображение дополнительных значений \"по запросу\".\nПоскольку DataTables без обращения к источнику информации через AJAX не умеет получать дополнительные данные, которые не были запрошены при построении страницы, - поэтому получение доп. инф-и было заложено в запрос.\nТаблица данных довольно большая, поэтому я не стал добавлять в нее дополнительные значения как визуальный столбец DataTable, а сделал его скрытым и сформировал в виде подстроки, которая активируется по клику.","type":"unstyled","key":"57evf"},{"data":{"image":{"id":"69ba45e9d5f67908d6a2a46b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9h79r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь номер автомобиля является \"кликабельным\" и при щечке по нему вызывает отображение подстроки:","type":"unstyled","key":"chosf"},{"data":{"image":{"id":"69ba463a406f6a623f50af9b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подстрока DataTable","type":"atomic:image","key":"9m9pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для реализации такой функции необходимо:","type":"unstyled","key":"t1av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создать собственно HTML разметку таблицы:","type":"unstyled","key":"br91f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n

Дата заявки	Перевозчик	Фут. КТК	Номера контейнеров		№ авто	ФИО водителя
Дата заявки	Перевозчик	Фут.	№ контейнера	Фото КТК	№ авто	ФИО водителя

","type":"unstyled","key":"5i19f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"*В структуре задан столбец \"ФИО водителя\", но он будет невидим....\nЗдесь нет данных, поскольку за наполнение таблицы отвечает JS-скрипт, который задает характеристики, настройки и данные для отображения.","type":"unstyled","key":"7quqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Настройка свойств таблицы в коде JS:","type":"unstyled","key":"7l2ma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$(document).ready(function() {\nvar maintable = $('#ppost').DataTable({\n\t\"language\": {\"url\": \"ru.json\"},\n\tajax: {url:\"ajax/ppost_data.php\"},\n paging: true,\n\tsearching: true,\n scrollCollapse: true,\n scrollY: '600px',\n scrollX: true,\n\tfixedColumns:{ start: 9 },\n\tlengthMenu: [50, 100, 150, 300, -1],\n\n// этот кусок кода создает поля фильтрации на выбранных столбцах DataTable\t\t\ninitComplete: \nfunction () {\nthis.api().columns([1,2,3,4,5,6,7,8,9,11,13,14,15,16,17,18]).every(function () {\nlet column = this;\nlet title = column.header().textContent;\nlet input = document.createElement('input');\ninput.placeholder = title;\ncolumn.header().replaceChildren(input);\ninput.addEventListener('keyup', () => {\n\t\t\t if (column.search() !== this.value) {column.search(input.value).draw(); } });\n});\n},","type":"unstyled","key":"7c8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// далее выполняем настройку столбцов таблицы\n\"aoColumnDefs\": [\n{ \"bSortable\": false, \"aTargets\": [0,1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18] },\n\t{ 'searchable': false,'targets': [0,10,12,19] },\n//вот здесь объявляю столбец скрытым и присваиваю ему класс\n{target: 11,visible: false,className: \"details-control\",searchable: false} // Ном авто,\t\t\n],\n// устанавливаем ширину столбцов таблицы\naoColumns : [\n{ sWidth: '10px' },\n{ sWidth: '10px' },.........\n]\n});","type":"unstyled","key":"7crs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основа сделана - таблица создана и наполнена данными..\nОсталось реализовать отображение скрытого столбца в виде подстроки при клике по номеру автомобиля.\nИтак, скрытому столбцу присвоен класс \"details-control\".\nОписываем поведение таблицы при клике:","type":"unstyled","key":"188h8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$('#ppost tbody').on('click', 'td.details-control', function () {\nvar tr = $(this).closest('tr');\nvar row = maintable.row(tr);\n let fio = row.data()[11]; \n//при скрытом столбце можно получить значение через апи по номеру столбца\nconsole.log(fio);\n// создаем подстроку для отображения в виде таблицы:\nlet substr = ''+''+\n\t\t''+''+'

Водитель: '+fio+'

';\n// и описываем ее поведение\nif ( row.child.isShown() ) {\nrow.child.hide();\ntr.removeClass('shown');\n}else {\nrow.child(substr).show();\ntr.addClass('shown');}\n} );\n\nВот и вся реализация подстроки.","type":"unstyled","key":"2ejal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MDBbMqXWSdCHmek97dFC"}],"entityMap":{}},"mentions":[]}