Bootstrap 4-How to sort table with arrow icon changing color based on ASC/DESC
I would like to sort an table in asc and desc order.Basically when i click fa-sort-asc this should be highlighted and fa-sort-desc should be greyed out and vice-versa. Please help me how to achieve this in Bootstrap 4. There are examples but when ASC sort is done the down arrow is missing.
I also tried with datatables but i have no luck. Please help me what i need to add to make the sorting enable with color highlights
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script src="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</script>
</head>
<body>
<div class="container">
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>19</td>
<td>Germany</td>
</tr>
<tr>
<td>20</td>
<td>23</td>
<td>San Franisco</td>
</tr>
<tr>
<td>7</td>
<td>28</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// $('#dtBasicExample').DataTable();
});
</script>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>First of all, your jsfiddle is not using datatables, nor Bootstrap. It's using jquery.tablesorter so I don't know what's up with that. You might need to update the tags if you're planning to use tablesorter instead of datatables with Bootstrap then.
Secondly, it seems like your jsfiddle demo is missing jQuery, and setting the theme to "bootstrap". Have you read the documentation about how to use bootstrap theme in tablesorter.js?
Third, from tablesorter bootstrap theme demo, its author is saying
Bootstrap v4.x no longer includes fonts or images, so I didn't bother including Font Awesome icons on this demo page.
Maybe that was why the up/down arrows didn't show up because tablesorter.js uses images for the sorting icons.
Now in order to add sorting icons (maybe from Font Awesome's), you can't really change the header structure and add icons in it. The trick here is to style :before and :after of .tablesorter-header to use content \f0de (Font Awesome up arrow) and \f0dd (Font Awesome down arrow):
.tablesorter-header {
position: relative; /* This is needed for the absolute positioning. */
}
.tablesorter-header::before,
.tablesorter-header::after {
position: absolute;
right: 0.75em;
font-family: 'FontAwesome'; /* Use FontAwesome's font so that you can set the content */
opacity: 0.3; /* Set opacity to gray out icons by default */
}
.tablesorter-header::before {
content: '\f0de'; /* Font Awesome's up arrow */
top: calc(50% - 0.75em); /* Tricky to calculate the top offset */
}
.tablesorter-header::after {
content: '\f0dd'; /* Font Awesome's down arrow */
bottom: calc(50% - 0.75em);
}
.tablesorter-header.tablesorter-headerAsc::before,
.tablesorter-header.tablesorter-headerDesc::after {
opacity: 1; /* When sorting, set full opacity on the direction */
}
