Jeff B. Jeff B. - 2 years ago 299
Javascript Question

wenzhixin bootstrap-table detailView (child row) not initializing

I am using the wenzhixin bootstrap table and I am trying to get another bootstrap table to initialize in the child row which is referred to in the code as 'detailView'.

I was using datatables but this, so far, seems simpler and more straight forward to work with.

I will be passing the key from the parent row to the child row. Right now I am just using a static table that I got to initialize outside of the child row, now I am simply moving it to the child row, trying to get it to initialize, and then I will make the content dynamic.

The data is passing, but it does not seem the table is initializing. I'm wondering if I need to hide a table somewhere that I can initialize behind the scenes and then pass the content to the row (seems messy, but I can't think of another way to pull this off).

my code to initalize the detailView in the main table;

detailView: true,
detailFormatter: 'compExtInfo',

here is what I am returning to the child row (detailView)

function compExtInfo(index, row) {
var pAPI = row.api;

var hOut = '<table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">'+
'<th data-field="api" data-visible=false>API</th>'+
'<th data-field="finalfieldreport">Last Fld Rp</th>'+
'<th data-field="onbase">OnBase</th>'+
'<th data-field="tbg">Tbg</th>'+
'<th data-field="active">Actv</th>'+
return hOut;

here is the table / grid that will fully initialize if placed alone outside of a child table (same code as above, literally copied and pasted into the function).

<table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">
<th data-field="api" data-visible=false>API</th>
<th data-field="finalfieldreport">Last Fld Rp</th>
<th data-field="onbase">OnBase</th>
<th data-field="tbg">Tbg</th>
<th data-field="active">Actv</th>

Answer Source

I found a solution for this finally, code is listed below.

Main table initializations for the child row listed below;

detailView: true,    
onExpandRow: function (index, row, $detail) {
            compExtInfo($detail, row);}

Function called from the main table; get row key and pass to table builder

function compExtInfo($detail, row) {
    pAPI = row.api;

    buildTable($detail.html('<table></table>').find('table'), pAPI);

Table builder function

function buildTable($ext, api) {

        url: './completion/getcompletionext.php?api='+api,
        columns: [
                field: 'api',
                visible: false,
                title: 'API'
                field: 'finalfieldreport',
                title: 'Last Fld Rp'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download