[bootstrap-table] use of child table

[Costas]

[2021] bootstrap-table - v1.18

lib - https://examples.bootstrap-table.com/#welcomes/sub-table.html

<br>

---

the queryParams adds extra parameter to each call made to server, in the example acknowledge to API that requesting the method FillGrid (line 20).

The base grid, using server pagination (line 14-18)

we omit the HTML5 attribute (will initialize the bootstrap-table from javascript)

data-toggle="table"

as we don't want on first sight to transform to bootstrap-table via HTML5 attribute. Versus adding the following the (line 11)

data-detail-view="true"

so now bootstrap-table will know that will have child table for each row. Then in javascript using (line 41)

$("#tableTEST").bootstrapTable()

will be transformed to magic!

As you see on line 43, declaring the event onExpandRow, there we do an ajax call to fetch the data.. On line 49, bootstrap-table returns the columns of the row expanded, from there we getting the base record id, used on server side to make the needed query. The javascript doesn't know what fields expecting, all done dynamically...

Warning to use this feature, must have fontawessome.css / fa-solid-900.woff2 -- fa-plus and fa-minus only used...

<script>
function queryParams(params) {
    params.action = 'FillGrid';
    return params
}
</script>

[TABLE]
    [TD]
        [TR]
            [TD]id[/TD]
            [TD]League Name[/TD]
            [TD]Type[/TD]
            [TD]Country[/TD]
            [TD]Used[/TD]
        [/TR]
    
[/TABLE]

</div>

<script>
        function RefreshGrid(){

            if ($("#tableTEST").hasClass('table-bordered'))
                return;

            $("#tableTEST").bootstrapTable({

                onExpandRow: function (index, row, $detail) {

                    $.ajax({
                            url : 'entities/testDetails.php',
                            dataType : 'json',
                            type : 'POST',
                            data : { 'action' : 'GetRecordDetails', 'recID' : row.id },
                            success : function(data) {
                                
                                if (!data)
                                {
                                    alert("Error on fetching the child grid!");
                                    return;
                                }

                                //get key names (used as columns)
                                var JSONFields = Object.keys(data[1]);

                                var columns = []
                                var rows = []
                                var row, i, j;

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

                                for (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.html('[TABLE][/TABLE]')
                                $detail.find('table').bootstrapTable({
                                    columns: columns,
                                    data: rows
                                });

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

RefreshGrid();
</script>

<br>
<br>
server side

//the connection made with the following attribute
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC

echo json_encode($db->getSet("select * from tableChild where recID=$recID", null));

---

A more minimal 'detail view' (unfortunately you can't do an ajax call there) is :

//add these HTML5 attributes to table
   data-detail-view="true"
   data-detail-formatter="detailFormatter"

//then when '+' clicked, will run the 
function detailFormatter(index, row) {
    console.log(row.id);
    var html =  "[TABLE][TR][TD]1[/TD][TD]2[/TD][/TR][/TABLE]"
    return html;
}

//src - https://examples.bootstrap-table.com/index.html#column-options/detail-formatter.html#view-source

<br>
old version [bootstrap-table] transform PHP recordset to magic!

<br>