使用Bootstrap实现交互式表格无效果，请求排查问题

1. 修正HTML属性语法错误 #

你的table标签里的data=toggle="table"是语法错误，正确写法是data-toggle="table"，缺少连字符会导致bootstrap-table无法识别初始化标记。

2. 启用排序功能 #

bootstrap-table默认不开启列排序，需要给每个表头<th>添加data-sortable="true"属性，才能让表头具备点击排序的交互。

3. 验证文件路径与版本兼容性 #

• 确认css/bootstrap.min.css、css/bootstrap-table.min.css、js/jQuery-3.1.1.min.js、js/bootstrap.min.js、js/bootstrap-table.js这些文件的路径完全正确，文件没有缺失。
• 确保bootstrap、bootstrap-table和jQuery的版本相互兼容，比如bootstrap 3.x搭配适配的bootstrap-table版本，避免因版本不匹配导致功能失效。

修正后的完整代码 #

<!doctype html>
<html>
 <head>
   <link rel="stylesheet" href="css/bootstrap.min.css"> 
   <link rel="stylesheet" href="css/bootstrap-table.min.css">
 </head>
 <body>
  <div class="container">
   <table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-show-columns="true">
        <thead>
            <tr>
            <th scope='col' data-sortable="true">Column 1</th>
            <th scope='col' data-sortable="true">Column 2</th>
            <th scope='col' data-sortable="true">Column 3</th>
            <th scope='col' data-sortable="true">Column 4</th>
            <th scope='col' data-sortable="true">Column 5</th>
            <th scope='col' data-sortable="true">Column 6</th>
            </tr>
    </thead>   
  <tbody>
        <tr>
        <td>Conf</td>
        <td>even 20 trail A</td>
          <td>True</td>
        <td>False</td>
        <td>0</td>
          <td>True</td>
        </tr>
        <tr>
        <td>Conf</td>
          <td>even 20 trail B</td>
        <td>True</td>
          <td>False</td>
        <td>0</td>
        <td>True</td>
        </tr>
        </tbody>
     </table>
</div>
<script src="js/jQuery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script>
    $(document).ready(function(){
     $('table').bootstrapTable();
    });
</script>
</body>
</html>

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