使用Bootstrap-table时详情视图功能失效问题排查

Hey there, let's work through why your Bootstrap-table detail view isn't firing up. I’ve gone through your code and spotted a few key issues that are blocking the functionality:

1. jQuery Loading Conflict & Wrong Order #

You’re loading two versions of jQuery: first the slim build (which cuts out features Bootstrap-table needs) and then the full version. This creates conflicts, and the slim build lacks utilities required for the table’s detail view to work properly.

Fix: Remove the slim jQuery script, and load the full jQuery first before any other dependent scripts:

<!-- Load full jQuery first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Then load Popper, Bootstrap, and Bootstrap-table -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>

2. Incorrect HTML Escaping in detailFormatter #

Your formatter function uses HTML entity codes like <p> instead of actual HTML tags. Bootstrap-table expects raw HTML strings for the detail view, so these escaped entities will just display as plain text instead of rendering as paragraphs.

Fix: Update your detailFormatter function to use regular HTML tags:

function detailFormatter(index, row) {
  var html = [];
  $.each(row, function(key, value) {
    html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  });
  return html.join('');
}

3. Ensure detailFormatter is Globally Accessible #

Make sure your detailFormatter function is defined before the Bootstrap-table initializes. Place the script containing this function right after loading jQuery, so it’s available when the table sets up.

4. Static Table Data Tweak #

Since you’re using static <tbody> rows instead of AJAX-loaded data, double-check that the data-toggle="table" attribute is present (which it is) and that the script order fix above lets Bootstrap-table properly parse these rows into its internal data structure.

Full Corrected Code #

Here’s the complete working code with all fixes applied:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">

<!-- Load full jQuery first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Define formatter function immediately after jQuery -->
<script>
function detailFormatter(index, row) {
  var html = [];
  $.each(row, function(key, value) {
    html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  });
  return html.join('');
}
</script>
<!-- Then load remaining dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>

<table class="treat-table" id="table" 
       data-detail-view="true" 
       data-detail-formatter="detailFormatter" 
       data-toggle="table" 
       data-pagination="true" 
       data-page-size="5" 
       data-search="true" 
       data-show-footer="false">
  <thead>
    <tr>
      <th data-field="checkboxselect" data-checkbox="true"></th>
      <th data-field="id" data-width="40" data-halign="center">ID</th>
      <th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
      <th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
      <th data-field="treatmentPrice">Treatment price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td data-halign="center">2</td>
      <td>Plastic surgery</td>
      <td>Rhino plasty</td>
      <td>range: $2000 to 3000$</td>
    </tr>
    <tr>
      <td></td>
      <td data-halign="center">3</td>
      <td>Plastic surgery</td>
      <td>Lift &gt; Face lift</td>
      <td>range: $2000 to 3000$</td>
    </tr>
  </tbody>
</table>

After applying these changes, you should see expandable detail icons next to each row—clicking them will display the formatted detail content as you expected.

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