在带有按钮的表上使用 bootstrap-table答案

【问题标题】：Using bootstrap-table on a table with buttons在带有按钮的表上使用 bootstrap-table
【发布时间】：2026-02-09 06:05:01
【问题描述】：

我一直试图在我的引导表中包含一个排序功能。该表包含对话框按钮，我想按按钮值对表进行排序。完整代码如下：

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.css">
   </head>
   <body>
      <div class="container">
         <h2 class="text-primary">Test Results</h2>
         <br/>
         <table class="table table-condensed" data-sort-name="pass_count" data-sort-order="desc" id="core_table">
            <thead>
               <tr class="info">
                  <th data-field="test_name" data-sortable="true"><b>Test Suite</b></th>
                  <th data-field="pass_count" data-sortable="true"><b>Pass</b></th>
                  <th data-field="fail_count" data-sortable="true"><b>Failure</b></th>
                  <th data-field="error_count" data-sortable="true"><b>Error</b></th>
                  <th data-field="time" data-sortable="true"><b>Time</b></th>
                  <th data-field="result" data-sortable="true"><b>R</b></th>
               </tr>
        </thead>
        <tbody>
           </tr>
           <tr>
              <td>TestCopyrightFile__qa-old_TestResults_xml</td>
              <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td>
              <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td>
              <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestCopyrightFile__qa-old_TestResults_xml_Error">1</button></td>
              <td>0.801</td>
              <td bgcolor='#2EFEF7'></td>
           </tr>
           <tr>
              <td>TestAOS_testAos_qa-old_TestResults_xml</td>
              <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestAOS_testAos_qa-old_TestResults_xml_Pass">2</button></td>
              <td><button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#TestAOS_testAos_qa-old_TestResults_xml_Fail">1</button></td>
              <td><button type="button" class="btn btn-info btn-lg btn-block">0</button></td>
              <td>2.144</td>
              <td bgcolor='#FF0000'></td>
           </tr>
        </tbody>
     </table>
     <div class="modal fade" id="TestCopyrightFile__qa-old_TestResults_xml_Error" role="dialog">
        <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%;  margin-top: 50px; margin-bottom:50px;">
           <div class="modal-content">
              <div class="modal-header">
                 <h2 class="text-primary">Error testcases from TestCopyrightFile: : qa-old: TestResults: xml</h2>
                 <br/>
              </div>
              <div class="modal-body" style="height: 250px; overflow-y: auto;">
                 <table class="table table-condensed">
                    <thead>
                       <tr class="info">
                          <th><b>Test</b></th>
                          <th><b>Time</b></th>
                          <th><b>Result</b></th>
                       </tr>
                    </thead>
                    <tbody>
                       </tr>
                       <tr>
                          <td>Error: testCopyrightFile can't convert nil into String</td>
                          <td>0.801</td>
                          <td bgcolor='#2EFEF7'></td>
                       </tr>
                    </tbody>
                 </table>
              </div>
              <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
           </div>
        </div>
     </div>
  </div>
  <div class="modal fade" id="TestAOS_testAos_qa-old_TestResults_xml_Pass" role="dialog">
     <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%;  margin-top: 50px; margin-bottom:50px;">
        <div class="modal-content">
           <div class="modal-header">
              <h2 class="text-primary">Pass testcases from TestAOS: testAos: qa-old: TestResults: xml</h2>
              <br/>
           </div>
           <div class="modal-body" style="height: 250px; overflow-y: auto;">
              <table class="table table-condensed">
                 <thead>
                    <tr class="info">
                       <th><b>Test</b></th>
                       <th><b>Time</b></th>
                       <th><b>Result</b></th>
                    </tr>
                 </thead>
                 <tbody>
                    </tr>
                    <tr>
                       <td>Verifying correct response code is returned</td>
                       <td>1.742</td>
                       <td bgcolor='#00FF40'></td>
                    </tr>
                    <tr>
                       <td>Verifying correct response is returned</td>
                       <td>0.007</td>
                       <td bgcolor='#00FF40'></td>
                    </tr>
                 </tbody>
              </table>
           </div>
           <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
     </div>
  </div>
  </div>
  <div class="modal fade" id="TestAOS_testAos_qa-old_TestResults_xml_Fail" role="dialog">
     <div class="modal-dialog modal-lg" style="overflow-y: initial; max-height:85%;  margin-top: 50px; margin-bottom:50px;">
        <div class="modal-content">
           <div class="modal-header">
              <h2 class="text-primary">Fail testcases from TestAOS: testAos: qa-old: TestResults: xml</h2>
              <br/>
           </div>
           <div class="modal-body" style="height: 250px; overflow-y: auto;">
              <table class="table table-condensed">
                 <thead>
                    <tr class="info">
                       <th><b>Test</b></th>
                       <th><b>Time</b></th>
                       <th><b>Result</b></th>
                    </tr>
                 </thead>
                 <tbody>
                    </tr>
                    <tr>
                       <td>Failure: testAos Assertion failed for Verifying correct response code is returned. status like. 200 expected but was 401.</td>
                       <td>0.006</td>
                       <td bgcolor='#FF0000'></td>
                    </tr>
                 </tbody>
              </table>
           </div>
           <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
        </div>
     </div>
  </div>
  </div>

<script>
$('#core_table').bootstrapTable({

});
</script>

当脚本部分被注释掉时，页面格式正确，但是当我应用引导表进行排序时，我得到了表中按钮的代码而不是按钮，并且排序适用于代码而不是按钮的值。如何让按钮显示和排序以作用于它们的值？

提前致谢

一个

这是我一直在使用的小提琴https://jsfiddle.net/x6htxss0/ 当 javascript 不存在且 bootstrap-table 脚本未实现时，该表看起来是我想要的样子。

【问题讨论】：

标签： twitter-bootstrap sorting bootstrap-table

【解决方案1】：

最终？编辑解决方案：

在启动 bootstrapTable 时将转义选项设置为 false 将解决此问题：

$('#core_table').bootstrapTable({escape: false});

我建议查看bootstrapTable documentation（尽管它没有为我提供任何解决方案）。

我找到的快速简便的解决方案是更换 gt;和lt;从插件创建回 > 和

$('#core_table').find('td').each(function() {
  $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<"));
});

编辑

这里是 setTimeout hack。 sort.bs.table 事件在插件对数据进行排序和修改之前触发。可能的解决方案可能是修改插件以具有 aftersort.bs.table 事件或更好，将数据呈现为 html / 不修改数据。

$('#core_table').on('sort.bs.table', function() {
      $('#core_table').find('td').each(function() {
        $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<"));
});

编辑：破解解决方案

$('#core_table').off().bootstrapTable().on('post-body.bs.table',
    function() {
      $('#core_table').find('td').each(function() {
        $(this).html($(this).html().split("&gt;").join(">").split("&lt;").join("<"));
      });
});

【讨论】：

我试过 $('#core_table').on('sort.bs.table' function()) 但排序不可用或排序可用并且按钮恢复为文本起源
抱歉回复晚了！似乎将 eventlistener 附加到 sort.bs.table 事件不起作用，因为它在表实际排序之前触发。我可以通过在上面的代码中添加 setTimeout 并仅使用 1ms 来使其工作。有一个简短的 html 闪现而不是实际元素。应该可以修改插件以具有允许您附加上面的代码的 aftersort 事件，但我不精通这种方式。也许向插件的开发者提交请求是明智的，但同时您可以使用 setTimeout hack。
您好！我查看了文档以查找排序后可能触发的事件并找到了一个。我用它更新了我的答案。 “post-body.bs.table”而不是“sort.bs.table”对我有用，没有任何黑客（拆分/加入除外）。
好吧，我很困惑。这是我的小提琴jsfiddle.net/x6htxss0/6 当它第一次加载按钮的文本版本时出现。它仅在按钮被呈现的排序上。现在，当我尝试为表格编写代码以使用呈现的按钮加载时，排序选项就会消失。您是否对它既适用于初始渲染又适用于排序渲染感到厌烦？
我清理了 JavaScript，但这里有一个工作小提琴：jsfiddle.net/yttLoq47/1