I have been trying to include a sorting function on my bootstrap table. The table contains buttons to dialogs and I want to sort the table on the button values. Here is the complete code:
<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>
When the script section is commented out the page is formatted correctly but when I apply the bootstrap-table to have sorting I get the code for the buttons in the table rather than the buttons and the sorting works on the code and not the values of the buttons. How can I get the buttons to show and the sorting to act on their values?
Thanks in advance
A
Here is a fiddle I have been working with https://jsfiddle.net/x6htxss0/ When the javascript is not present and the bootstrap-table script is not implemented the table looks how I want it to look.
FINAL? EDIT SOLUTION:
Setting the escape option to false when initiating the bootstrapTable will resolve this problem:
$('#core_table').bootstrapTable({escape: false});
I would recommend looking through the bootstrapTable documentation (although that did not provide me with any solutions).
The quick and easy solution that I found was to replace the gt; and lt; that were being created from the plugin back to > and <. This will need to be done every time a sort is performed. You should be able to add an event listener to the onSort.bs.table event.
$('#core_table').find('td').each(function() {
$(this).html($(this).html().split(">").join(">").split("<").join("<"));
});
EDIT
Here is the setTimeout hack. The sort.bs.table event fires before the plugin sorts and modifies the data. Possible solutions could be to modify the plugin to have an aftersort.bs.table event or better yet, render the data as html / not modify the data.
$('#core_table').on('sort.bs.table', function() {
$('#core_table').find('td').each(function() {
$(this).html($(this).html().split(">").join(">").split("<").join("<"));
});
EDIT: 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("<"));
});
});