我一直在尝试在我的引导程序表中包含一个排序功能。该表包含对话框的按钮，我想在按钮值上对表进行排序。这是完整的代码：
<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进行排序时，我得到表中按钮的代码，而不是按钮和排序对代码而不是按钮的值。如何让按钮显示和排序以对其值进行操作？
提前致谢
A
这是我与https://jsfiddle.net/x6htxss0/合作的小提琴 当javascript不存在且未实现bootstrap-table脚本时，表格看起来我希望它看起来如何。
答案 0 :(得分：2)
FINAL？编辑解决方案：
启动bootstrapTable时将escape选项设置为false将解决此问题：
$('#core_table').bootstrapTable({escape: false});
我建议查看bootstrapTable documentation（虽然这并没有为我提供任何解决方案）。
我发现的快速简便的解决方案是替换gt;和lt;正在从插件创建回到＆gt;和＆lt;。每次执行排序时都需要执行此操作。您应该能够向onSort.bs.table事件添加事件侦听器。
$('#core_table').find('td').each(function() {
$(this).html($(this).html().split(">").join(">").split("<").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(">").join(">").split("<").join("<"));
});
编辑：HACK SOLUTION
$('#core_table').off().bootstrapTable().on('post-body.bs.table',
function() {
$('#core_table').find('td').each(function() {
$(this).html($(this).html().split(">").join(">").split("<").join("<"));
});
});