Bootstrap Table JavaScript Data-Sorter For Currency Column
by Greg Esguerra
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.js"></script>
<table id="tblDemo" class="table-condensed table-striped">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price" data-sortable="true" data-sorter="AmountSorter">Price</th>
</tr>
</thead>
</table>
JavaScript
$(function () {
var $table = $('#tblDemo');
var mydata =
[
{
"id": 1,
"name": "test1",
"price": "$0.00"
},
{
"id": 2,
"name": "test2",
"price": "$385.00"
},
{
"id": 3,
"name": "test3",
"price": "$0.00"
},
{
"id": 4,
"name": "test4",
"price": "$989.00"
},
{
"id": 5,
"name": "test5",
"price": "$2,882.42"
},
{
"id": 6,
"name": "test6",
"price": "$1,467.70"
},
{
"id": 7,
"name": "test7",
"price": "$0.00"
},
{
"id": 8,
"name": "test8",
"price": "$25.66"
},
{
"id": 9,
"name": "test9",
"price": "$2,875.40"
},
{
"id": 10,
"name": "test10",
"price": "$0.00"
}
];
$('#tblDemo').bootstrapTable({
data: mydata
});
});
function AmountSorter(a, b) {
var billA = Number(a.replace(/(^\$|,)/g, ''));
var billB = Number(b.replace(/(^\$|,)/g, ''));
if (billA < billB)
return -1;
if (billA > billB)
return 1;
return -0;
}