How to populate each row with different data?

Ewen

Hi all!
Im new to Datatable and i have little problem. I found datatable example that i would like to populate with different data on each row. This is the link to the example: https://datatables.net/examples/api/row_details.html.
I modified this table with 4 levels of criticity like this:
What i want to do is populate each row with specific data.
To do this, i firstly add id to each row with DT_RowId function like this:

{
                "draw": null,
                "data": [
                    {
                        "DT_RowId": "row_1001",
                        "criticityId": "C1",
                        "name": "1"
                    },
                    {
                        "DT_RowId": "row_1002",
                        "criticityId": "C2",
                        "name": "2"
                        },
                    {
                        "DT_RowId": "row_1003",
                        "criticityId": "C3",
                        "name": "3"
                    },
                    {
                        "DT_RowId": "row_1004",
                        "criticityId": "C4",
                        "name": "4"
                    }
                ],
                "recordsTotal": null,
                "recordsFiltered": null,
                "error": null,
                "fieldErrors": [],
                "id": null,
                "meta": {},
                "options": {},
                "files": {},
                "upload": { "id": null },
                "debug": null,
                "cancelled": []
            }

It's work, each row have id. This is my second level data with id related to first level:

{
              "draw": null,
              "data": [
                {
                  "criticityId": "row_1001",
                  "BpId": "10407",
                  "BpName": "BP: Vente en ligne"
      
                },
                {
                  "criticityId": "row_1002",
                  "BpId": "36526",
                  "BpName": "BP: Communication"
            
                },
                {
                  "criticityId": "row_1003",
                  "BpId": "37441",
                  "BpName": "BP: Bureautique"
          
                },
                {
                  "criticityId": "row_1004",
                  "BpId": "78950",
                  "BpName": "BP: Infrastructure SI"
            
                },
                {
                  "criticityId": "row_1001",
                  "BpId": "78951",
                  "BpName": "BP: ERP"
                },
                {
                  "criticityId": "row_1001",
                  "BpId": "78952",
                  "BpName": "BP: Achat matières premières"
                }
              ],
              "recordsTotal": null,
              "recordsFiltered": null,
              "error": null,
              "fieldErrors": [],
              "id": null,
              "meta": {},
              "options": {},
              "files": {},
              "upload": { "id": null },
              "debug": null,
              "cancelled": []
            }

Here is my code when i try to add data to specific row but it's not working:

 // Add event listener for opening and closing first level childdetails
            $('#example tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var rowData = row.data();


                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');

                    // Destroy the Child Datatable
                    $('#cl' + rowData.criticityId).DataTable().destroy();
                } else {
                    // Open this row
                    row.child(format(rowData)).show();
                    var id = rowData.criticityId;

                    childTable = $('#cl' + id).DataTable({
                        dom: "t",
                        ajax: {
                            url: '{{ path('datajson1') }}',
                            dataSrc: 'data'
                        },
                        columns: [
                            {
                                className: 'details-control1',
                                orderable: false,
                                data: null,
                                defaultContent: ''
                            },
                            {
                                data: 'criticityId',
                                render: function (data, type, row) {
                                    if (data === "row_1001") {
                                        data = '<a href="#">' + data + '</a>';
                                        return data;
                                    }
                                }
                            }
                        ],
                        columnDefs: [
                            {
                                targets: [1],
                                className: "label-col"
                            }
                        ],
                        select: false,
                    });

                    tr.addClass('shown');
                }
            });

Anyone can help me?
Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin