1

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

4
  • 1
    la pregunta no esta muy clara para mi, si quiere ordenar los datos por fecha seria realizar en la consulta mysql por ejemplo ASC o DESC: SELECT [date] FROM [tbemp] ORDER BY [date] ASC o la otra seria utilizar la libreria datatables para realizar el ordenamiento en cada columna [datatables.net/examples/basic_init/table_sorting.html] Commented el 7 abr. 2018 a las 14:41
  • Mi idea es que la flecha orden como si fueran de la A a la Z, que si tocas la flecha para abajo la A se vaya hacia abajo y la Z arriba e inversa (por orden alfabetico), por otro lado la pagina esa que me enviaste me tira error.
    – MarianoF
    Commented el 7 abr. 2018 a las 14:45
  • No tira error @ElectricMarian , busca en los ejemplos y la documentacion, y encontraras la manera de implementar y utilizar la libreria Commented el 7 abr. 2018 a las 15:16
  • No el problema es que yo estoy usando como condicion los th para que aparezcan las flechas, yo lo que quisiera que las flechas aparezcan en la segunda fila y no en la primera
    – MarianoF
    Commented el 7 abr. 2018 a las 15:31

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.