Почему если я использую innerHTMl библиотека игнорирует напрочь контент таблицы?

Question

[historydev]

Добрый день. Скажите пожалуйста, что я делаю не так и как это нужно делать?

let body = ''

		const getTable = async() => {
			const query = await fetch('/select-table', {method: 'POST'})
			const data = await query.json()

			for(i=0; i<data.length; i++) {

				body += 
					`
						<tr>
							<td>${data[i].g1}</td>
								<td>${data[i].v1}</td>
								<td>${data[i].v2}</td>
								<td>${data[i].v3}</td>
								<td>${data[i].v4}</td>
								<td>${data[i].v5}</td>
							<td>${data[i].g2}</td>
								<td>${data[i].v6}</td>
								<td>${data[i].v7}</td>
								<td>${data[i].v8}</td>
								<td>${data[i].v9}</td>
								<td>${data[i].v10}</td>
							<td>${data[i].g3}</td>
								<td>${data[i].v11}</td>
								<td>${data[i].v12}</td>
								<td>${data[i].v13}</td>
								<td>${data[i].v14}</td>
								<td>${data[i].v15}</td>
							<td>${data[i].g4}</td>
								<td>${data[i].v16}</td>
								<td>${data[i].v17}</td>
								<td>${data[i].v18}</td>
								<td>${data[i].v19}</td>
								<td>${data[i].v20}</td>
							<td>${data[i].g5}</td>
								<td>${data[i].v21}</td>
								<td>${data[i].v22}</td>
								<td>${data[i].v23}</td>
								<td>${data[i].v24}</td>
								<td>${data[i].v25}</td>
						</tr>

					`

			}

			console.log(data)

			document.querySelector('tbody').append(body)
		}

		getTable()


		$(document).ready( function () {
		    $('#table_id').DataTable( {
		        dom: 'Bfrtip',
		        buttons: [
		            'copy', 'csv', 'excel', 'pdf', 'print'
		        ]
		    } );
		});

Comments

[Валерий Жмышенко]

Чтобы понять что вы делает не так, хотя бы скажите чего вы ожидаете.
И желательно закиньте это на code pen

[historydev]

Мне нужно экспортировать в эксель, если я руками вставлю столбцы в tbody у меня всё ок, если я юзаю innerHTML, всё ломается, вот. Я бы залил, но там данные подтягиваются с моей базы. Спасибо

[historydev]

Руками в смысле вот так:

<tbody>
<td>123</td>
</tbody>

Answer 1

[Евгений]

1. После загрузки данных нужно апдейтить DataTable или инициализировать DataTable после загрузки данных. Иначе таблица в импорте будет пустая, проверено.
2. В документации к DataTable есть свой, нативный метод ajax.

Так-же прошу обратить внимание на это, и не заниматься рисовкой таблицы самостоятельно.

Comments

[historydev]

Я могу костыльнуть таймаутом инициализации? Сработает?

[historydev]

Я бы покопался, но мне сейчас побыстрее, без напряга на голову, 15 часов сижу

[Евгений]

Владимир, зачем? Просто сделайте так:

const getTable = async() => {
    ....
    document.querySelector('tbody').append(body)
    initTable()
}

getTable()

function initTable() {
    $( '#table_id' ).DataTable({
        dom: 'Bfrtip',
        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
    });
};

[Евгений]

Владимир, там через data можно передать таблицу, структура обычный многомерный массив, просто в перво строке нужно передать заголовки табуляторов таблицы. Что-то типа такого:

const getTable = async() => {
    let query = await fetch('/select-table', {method: 'POST'})
    let data = await query.json()

    $(  '#table_id' ).DataTable({
        data: data,
        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
    });
}
getTable()

[Евгений]

Владимир, или ещё проще:

$( '#table_id' ).DataTable({
    ajax: '/select-table',
    buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
});

[historydev]

Евгений, initTable is not defined

[historydev]

Вот дурак я, вообще бошка уже не варит, забыл в функцию обернуть

[historydev]

Ура! Спасибо вам огромное и прошу прощения за собственную заторможенность.