Bootstrap Table详情视图默认展开实现方案咨询（适配Flask+Jinja环境）

Got it, Bootstrap Table doesn’t have a built-in config option to expand all detail views on page load, but we can easily pull this off with a bit of JavaScript that uses the table’s API methods. Here’s how to adapt this to your Flask/Jinja setup:

Step-by-Step Implementation #

1. Add the JavaScript Logic
   Drop this script at the bottom of your template (after the table element, or in a script block that runs once the DOM is fully loaded):

$(document).ready(function() {
    // Wait for the table to finish rendering its data
    $('#table').on('post-body.bs.table', function() {
        // Grab the table's DOM element
        const table = $(this).bootstrapTable('getOptions').table;
        
        // Loop through every data row and expand its detail view
        table.find('tr[data-index]').each(function() {
            const rowIndex = $(this).data('index');
            $('#table').bootstrapTable('expandRow', rowIndex);
        });
    });

    // Optional: Handle pagination (expand rows when switching pages)
    $('#table').on('page-change.bs.table', function() {
        // Small delay to make sure new page content is fully rendered
        setTimeout(() => {
            const table = $(this).bootstrapTable('getOptions').table;
            table.find('tr[data-index]').each(function() {
                const rowIndex = $(this).data('index');
                $('#table').bootstrapTable('expandRow', rowIndex);
            });
        }, 100);
    });
});

2. Why This Works
   • The post-body.bs.table event fires after the table loads and renders its data into the tbody. This ensures we’re only trying to expand rows that actually exist in the DOM.
   • We use Bootstrap Table’s native expandRow API method, which takes a row index and opens its detail view.
   • The optional pagination handler makes sure that when users switch to a new page, those rows also get expanded automatically.

Your Existing Table Code (No Changes Needed) #

Your Jinja-rendered table stays exactly as is—we’re just adding the JavaScript to trigger the expansion:

<table id="table" data-toggle="table" data-filter-control="true" data-show-search-clear-button="true" data-sortable="true" classes="table-sm" data-pagination="true" data-show-columns="true" data-show-columns-toggle-all="true" class="table-responsive" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true" data-click-to-select="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]" data-show-footer="true" >
<thead>
<tr>
<th data-field="link" data-filter-control="input" data-sortable="true" data-visible="false">asdf</th>
<th data-field="asdf" data-filter-control="input" data-sortable="true" data-visible="false">asdf</th>
<!--special characters and spaces not allowed in data-field name-->
<th data-field="asdf" data-filter-control="input" data-sortable="true">asdf</th>
<th data-field="asdf" data-filter-control="input" data-sortable="true">asdf</th>
<th data-field="asdf" data-filter-control="select" data-sortable="true">asdf </th>
<th data-field="asdf" data-filter-control="input" data-sortable="true" data-visible="false">asdf</th>
</tr>
</thead>
<tbody>
{% for row in tableA %}
<tr>
<!--non visibili -->
<td>{{row['asdf']|safe}}</td>
<td>{{ row['asdf'][0]['asdf'] }}</td>
<!--special characters and spaces not allowed in data-field name-->
<td>{{ row['asdf'][0]['df'] }}</td>
<td>{{ row['sdf'][0]['asdf'] }}</td>
<td>{{ row['asdf'][0]['asdf'] }}</td>
<td>{{url_for('asdf', asdf=row['asdf'])}}</td>
</tr>
{% endfor %}
</tbody>
</table>

Key Notes #

• Double-check that jQuery is included in your page (Bootstrap Table depends on it).
• If your table uses asynchronous data loading (e.g., data-url), the post-body.bs.table event will still fire after each data load, so the expansion logic works for dynamically fetched data too.

内容的提问来源于stack exchange，提问作者G M