data-detail-formatter with sub Table

[pipiscrew]

Description
v1.18.3

[edit] hmm, sure is not possible with data-detail-formatter, no 'compatible' with AJAX (even with async property)....

any example with real time fetch and sub table?

---

Example (optional)
On bootstrap-table there are rows, and I would like, when user click the expand icon > Query the API > display the result data as child bootstrap date.

I'm using these properties on table HTML

    data-detail-view="true"
    data-detail-formatter="detailFormatter"
--
    data-url="entities/<?= $entity ?>Helper.php"
    data-side-pagination="server"
    data-pagination="true"
    data-query-params="queryParams"

the plus icon appear - fine

specifically, on the detailFormatter function can get the record ID - fine drawing a table, with the following code

function detailFormatter(index, row) {
    console.log(row.id);
    var html =  "<table border=1><tr><td>1</td><td>2</td></tr></table>"
    return html;
}

the question how can I transform it to bootstrap-table ?

Using the method .bootstrapTable() is not possible there, needs an element.

Or the only way to achieve this, is the Sub Table ref examples.bootstrap-table.com/index.html#welcomes/sub-table.html ?

[UtechtDustin]

No it's not possible through the detailFormatter. Use the onExpandRow Event (like in the sub-table example), do you api request and render the table.

[pipiscrew]

finally, I remove the data-toggle="table" html5 attribute and initialize the bootstrap-table from JS as

$("#table<?= $entity ?>").bootstrapTable({
    onExpandRow: function (index, row, $detail) {

        $.ajax({
                url : 'entities/<?= $entity ?>Helper.php',
                dataType : 'json',
                type : 'POST',
                data : { 'action' : 'GetRecordDetails<?= $entity ?>JS', 'recID' : row.id },
                success : function(data) {

                    var JSONFields = Object.keys(data[1]);

                    var columns = []
                    var rows = []
                    var row;

                    for (i = 0; i < JSONFields.length; i++) {
                        columns.push({
                            field: JSONFields[i],
                            title: JSONFields[i],
                            sortable: true
                        })
                    }

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

                        for (j = 0; j < JSONFields.length; j++) {
                            row[JSONFields[j]] = data[i][JSONFields[j]];
                        }

                        rows.push(row);
                    }

                    //transform
                    $detail.bootstrapTable({
                        columns: columns,
                        data: rows
                    });

                },
                error : function(data) {
                    if (data)
                        alert(data.responseText);
                }
        });
    }});

fantastic work...

[pipiscrew]

complete example https://www.pipiscrew.com/2021/10/bootstrap-table-use-of-child-table/