Как заменить стандартную таблицу bootstrap на таблицы данных в jQuery?

Question

Я пытался найти много решений, но не решил свою проблему даже на веб-сайте dataTables. Проблема в том, как отобразить вложенный массив в json, используя DataTables? Для примера ниже, Как, если я просто хочу отобразить только данные l3_id: "1".

Я пытаюсь понять эту ссылку, но не совсем понимаю. Пример

Нет ошибки на вкладке консоли и сети.

DataTable не отображается, включая такие функции dataTables, как окно поиска, разбиение на страницы. (CDN / библиотека была импортирована)

JSON

{
    "data": [
        {
            "project_id": "1",
            "l1_task": [
                {
                    "l1_id": "1",
                    "l2_task": [
                        {
                            "l2_id": "1",
                            "l3_task": [
                                {
                                    "l3_id": "1",
                                    "l3_name": "My name"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

JS (I Применяю HTML в JS)

"<table id='Layer3Table' class='table dt-responsive nowrap' style='width:100%'>"+
    "<thead>"+
        "<tr>"+
            "<th class='text-center'>ID</th>"+
            "<th class='text-center'>Activity Name</th>"+
        "</tr>"+
    "</thead>"+
"</table>"+

$('#Layer3Table').DataTable({
    ajax: { 
        url: url_project_detail",
        dataSrc : "data"
    },
    columns: [
        { data : "l1_task.0.l2_task.0.l3_task.0.l3_id" },
        { data : "l1_task.0.l2_task.0.l3_task.0.l3_name" },
    ],
});

Answer 1

Либо определите свою таблицу, включая все содержимое tbody в HTML, затем используйте DataTables, чтобы включить функции поиска и c. Если вы делаете это таким образом, вам не нужно устанавливать URL или столбцы (хотя вы все равно можете установить другие параметры).

$('#Layer3Table').DataTable();

Или если вы хотите использовать функции URL и столбцов, создайте структуру таблицы basi c в HTML

<table id='Layer3Table' class='table dt-responsive nowrap' style='width:100%'>
    <thead>
        <tr>
            <th class='text-center'>Project ID</th>
            <th class='text-center'>Project Name</th>
            <th class='text-center'>Project Description</th>
            <th class='text-center'>Project Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Затем настройте свой DataTable отдельно в JavaScript.

$('#Layer3Table').DataTable( {
    ajax: { 
        url: url_project_detail,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: "application/json",
        dataSrc : "data",
    },
    columns: [
        { data : "l3_id", "className": "text-center" },
        { data : "l3_name", "className": "text-center" },
        { data : "l3_description", "className": "text-center" },
        { data : "l3_status", "className": "text-center" }
    ],
});

То, что вы, похоже, делаете, циклически повторяется ваши результаты и создание DataTable для каждого из них, поэтому он не понимает.