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

Question

我一直在尝试在我的 bootstrap table 中加入排序功能。 table 包含对话框按钮，我想根据按钮值对 table 进行排序。这是完整的代码：

<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>

当脚本部分被注释掉时，页面格式正确但是当我应用 bootstrap-table 进行排序时，我得到了 table 中按钮的代码而不是按钮，排序对代码起作用，而不是对按钮的值起作用。如何让按钮显示并根据它们的值进行排序？

提前致谢

一个

这是一个 fiddle 我一直在使用 https://jsfiddle.net/x6htxss0/ 当 javascript 不存在且 bootstrap-table 脚本未实施时，table 看起来像我想要的样子。

Answer 1

决赛？编辑解决方案：

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

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

我建议您浏览 bootstrapTable documentation（尽管那没有为我提供任何解决方案）。

我找到的快速简便的解决方案是更换 gt;和lt；从插件创建回到 > 和 <。每次执行排序时都需要这样做。您应该能够向 onSort.bs.table 事件添加事件侦听器。

$('#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("<"));
      });
});

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

Using bootstrap-table on a table with buttons

sorting

twitter-bootstrap

bootstrap-table