Como puedo hacer para ordenar un listado de items (cada columna tiene flecha arriba y abajo) de una tabla a través de flechas que no sean imágenes pero si font awesome, resulta que yo en este sitio web, armé algo en base a imágenes que son svg que no aparecen no se porque, pero lo que necesito es que las flechas aparezcan en la segunda fila y no donde esta los títulos y por otro lado quisiera que en ves de usar imágenes usara arrow de font.
jQuery.fn.addSortWidget = function(options){
var defaults = {
img_asc: "http://qkstudiodemo.com/laser_boulevard/html/images/svg/asc_sort.svg",
img_desc: "http://qkstudiodemo.com/laser_boulevard/html/images/svg/desc_sort.svg",
img_nosort: "http://qkstudiodemo.com/laser_boulevard/html/images/svg/no_sort.svg",
};
var options = $.extend({}, defaults, options),
$destElement = $(this),
is_asc = true;
$("th", $destElement).each(function(index){ // to each header cell (index is useful while sorting)
$("<img>") // create image that allows you to sort by specific column
.attr('src', options.img_nosort)
.addClass('sorttable_img')
.css({
cursor: 'pointer',
'margin-left': '10px',
})
.on('click', function(){
$(".sorttable_img", $destElement).attr('src', options.img_nosort);
$(this).attr('src', (is_asc) ? options.img_desc : options.img_asc);
is_asc = !is_asc;
var rows = $("tr", $destElement).not(":has(th)").get(); // save all rows (tr) into array (.get())
rows.sort(function(a, b){
// sort array with table rows
var m = $("td:eq(" + index + ")", a).text(); // get column you needed by using index of th element (closure)
var n = $("td:eq(" + index + ")", b).text();
// if elements are numbers
if (!isNaN(m) && !isNaN(n))
return (is_asc) ? (m - n) : (n - m);
// if elements are strings
if (is_asc)
return m.localeCompare(n); // asc
else
return n.localeCompare(m); // desc
});
var tbody = ($destElement.has("tbody")) ? "tbody" : ""; // check if table has tbody
for (var i=0; i<rows.length; i++){
$(tbody, $destElement).append(rows[i]); // add each row to table (elements do not duplicate, just place to new position)
}
})
.appendTo(this); // add created sort image with click event handler to current th element
});
return $destElement;
}
$(function(){
$("#dest").addSortWidget();
});
.tabla img{
width: 37px
}
.rwd-table {
margin: 1em 0;
min-width: 300px;
width: 100%;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
padding-top: .5em;
}
.rwd-table td:last-child {
padding-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block;
}
.rwd-table {
color: #fff;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
}
.rwd-table tr {
border-radius: 50px
}
.rwd-table th{
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 15px;
text-transform: uppercase;
text-align: center
}
.rwd-table th, .rwd-table td {
margin: .5em 1em;
text-align: center
}
.rwd-table th, .rwd-table td a{
font-size: 14px;
color: #00aeef;
text-decoration: underline
}
.titulo_tabla th{
background-color: #00aeef;
border: 1px solid #e1e1e1;
text-decoration: none
}
.table-striped > tbody > tr:nth-of-type(odd) img {
display: none
}
tr:nth-child(odd) {background-color: #fff;
color: #5d5d5d
}
tr:nth-child(even) {background-color: #f2f2f2;
color: #5d5d5d
}
@media (min-width: 480px) {
.rwd-table th, .rwd-table td {
padding: 18px 7px!important
}
}
.rwd-table th, .rwd-table td:before {
color: #fff;
}
@media (min-width: 480px) {
.rwd-table td:before {
display: none;
}
}
@media (min-width: 480px) {
.rwd-table th, .rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child, .rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child, .rwd-table td:last-child {
padding-right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="tabla">
<table class="rwd-table" id="dest">
<tr class="titulo_tabla">
<th>MODELO</th>
<th>PMAX</th>
<th>PMAX (1MIN)</th>
<th>NEP</th>
<th>EMAX (SINGLE SHOT)</th>
<th>absorbedor</th>
<th>APERTURa</th>
<th> </th>
</tr>
<tr>
<th data-th="Movie Title"></th>
<th data-th="Genre"></th>
<th data-th="Year"></th>
<th data-th="Gross"></th>
<th data-th="Movie Title"></th>
<th data-th="Genre"></th>
<th data-th="Year"></th>
<td data-th="Gross"></th>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-L-D0</td>
<td data-th="Genre">40 mW</td>
<td data-th="Year">40 mW</td>
<td data-th="Gross">5 nW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-D0</td>
<td data-th="Genre">25 mW</td>
<td data-th="Year">25 mW</td>
<td data-th="Gross">300 nW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UP10P-2S-H5-L</td>
<td data-th="Genre">2 mW</td>
<td data-th="Year">2 mW</td>
<td data-th="Gross">100 μW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Broadband</td>
<td data-th="Year">10 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-L-D0</td>
<td data-th="Genre">40 mW</td>
<td data-th="Year">40 mW</td>
<td data-th="Gross">5 μW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-D0</td>
<td data-th="Genre">25 mW</td>
<td data-th="Year">25 mW</td>
<td data-th="Gross">300 μW</td>
<td data-th="Movie Title">3J</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UP10P-2S-H5-L</td>
<td data-th="Genre">2 mW</td>
<td data-th="Year">2 mW</td>
<td data-th="Gross">100 μW</td>
<td data-th="Movie Title">3J</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">10 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-L-D0</td>
<td data-th="Genre">40 mW</td>
<td data-th="Year">40 mW</td>
<td data-th="Gross">5 μW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-D0</td>
<td data-th="Genre">25 mW</td>
<td data-th="Year">25 mW</td>
<td data-th="Gross">300 μW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UP10P-2S-H5-L</td>
<td data-th="Genre">2 mW</td>
<td data-th="Year">2 mW</td>
<td data-th="Gross">100 μW</td>
<td data-th="Movie Title">3J</td>
<td data-th="Genre">Broadband</td>
<td data-th="Year">10 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
<tr>
<td data-th="Movie Title">UM9B-BL-L-D0</td>
<td data-th="Genre">40 mW</td>
<td data-th="Year">40 mW</td>
<td data-th="Gross">5 μW</td>
<td data-th="Movie Title">N/A</td>
<td data-th="Genre">Radiometer</td>
<td data-th="Year">9 mm Ø</td>
<td data-th="Gross"><a href="" title="">SOLICITAR PRESUPUESTO</a></td>
</tr>
</table>
</div>