I'm getting json data through an API and displaying it in a table using jquery. The data in table is being dynamically updated. How to add sort function to the table ex - sort by price, when I click on the price column?
we are getting details api (https://coincap.io/front) in json format and display in table through jQuery. but how to add sorting functionality individual column (ex: Price, Market Capitalization).
$(function(){
$.ajax({
url: "https://coincap.io/front"
})
.done(function(data) {
for(let i=0;i<100;i++)
{
let price;
if(data[i]['price'] > 0.1)
{
price = data[i]['price'].toFixed(2);
}
else
{
price = data[i]['price'].toFixed(5);
}
$('#coinValues').append(
'<tr id='+ data[i]['short'] + '><td class="name" style="text-align:left !important;padding-left:8px !important;"><span class="icon" style="background-position:center;vertical-align: middle;padding-right:3px;display:inline-block;height: 25px;width:25px;background:url('+data[i]["short"].toLowerCase() +'.png) no-repeat;background-size:contain;"></span> <a style="color:#5386C5;" target="_blank" href ="'+data[i]['short'] +'">' + data[i]['long'] + '</td>' +
'<td class="price">$'+ price + '</td>' +
'<td class="cap24hrChange">'+ data[i]['cap24hrChange'] + '%</td>' +
'<td class="mktcap">$'+ Math.round(data[i]['mktcap']).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '</td>' +
'<td class="volume">$'+ data[i]['volume'].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '</td>' +
'<td class="supply">'+ data[i]['supply'].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") +' ' + data[i]['short'] + '</td>' +
'</tr>'
);
$('#' +data[i]['short'] +' .cap24hrChange').css('color','#093');
$('#' +data[i]['short'] +' .cap24hrChange:contains("-")').css('color','#d14836');
}
});
});.paging-nav {
text-align: right;
padding-top: 2px;
}
.paging-nav a {
margin: auto 1px;
text-decoration: none;
display: inline-block;
padding: 1px 7px;
background: #91b9e6;
color: white;
border-radius: 3px;
}
.paging-nav .selected-page {
background: #187ed5;
font-weight: bold;
}
.nav>li>a{
padding:0px;
}
.coins_table_container {
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #f4f4f4;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-top: 15px;
border-radius:5px;
}
.coins_table {
table-layout: fixed;
border-collapse: collapse;
background: white;
width: 100%;
color: #717171;
border: 1px solid #e0e0e0;
border-radius:7px !important;
}
.coins_table tr td {
white-space: nowrap;
border: 1px solid #e0e0e0;
margin-right: 8px !important;
padding-right:8px !important;
font-family: helvetica;
font-size: 14px;
color: #717171;
text-align: right;
line-height:45px;
}
.coins_table tr th {
border: 1px solid #e0e0e0;
padding-right: 8px !important;
margin-right: 8px !important;
font-family: helvetica;
font-size: 14px;
color: #717171;
/* text-align: center; */
line-height: 22px !important;
margin-right: 0px !important;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}
.selectlist{
margin-bottom:15px;
width:50%;
float:left;
margin-top:7px;
}
.srch{
float: left;
width: 100%;
box-sizing: border-box;
margin-bottom: 15px;
margin-top: 15px;
}
.new-topz{
margin-top:30px;
margin-bottom:20px;
}
.cname{
width:14% !important;
}
.cprice{
width:10% !important;
}
.cmarket{
width:16% !important;
}
.cvol{
width:15% !important;
}
.cchange{
width:12% !important;
}
.cavailbl{
width:21% !important;
}
.container{
width:93%;
max-width:1600px;
}
#sidebar-container{
width: 26%;
margin-right: 0px;
margin-top:50px;
}
#currency-side{
width: 70%;
margin-right: 0px;
padding-right: 25px;
}
#sidebar{
border-left: 2px solid rgb(229, 229, 229);
}
#sidebar .widget_display_topics ul{
}
h1, h2, h3, h4, h5, h6{
font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
padding-bottom: 10px;
color: #333;
font-weight: 500;
line-height: 1em;
}
#rfw_dock-2{
display:none !important;
}
#text-5{
display:none !important;
}
.button-static{
border: 1px solid #e5e5e5;
padding-left: 14px;
padding-right: 14px;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 4px;
margin-left: 10px;
background: #fff;
text-transform: capitalize;
font-weight: 600;
font-size: 14px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="coin_table" class="coins_table">
<thead>
<tr>
<th class="cname" style="text-align:left !important;padding-left:8px !important">Name</th>
<th class="cprice">Price</th>
<th class="cchange">Change (%24hr)</th>
<th class="cmarket">Market Capitalization</th>
<th class="cvol">24 Hour Volume</th>
<th class="cavailbl">Availability Supply</th>
</tr>
</thead>
<tbody id="coinValues">
</tbody>
</table>
