¿Cómo configurar el css para tablesorter y bootstrap?

Question

Tablesorter podría hacer la ordenación correctamente en bootstrap 2, pero no pude encontrar la manera de establecer el color y el símbolo del encabezado de la tabla.

El CSS lo más probable es que encontré here:

table .header { 
    cursor: pointer; 
} 

table .header:after { 
    content: ""; 
    float: right; 
    margin-top: 7px; 
    border-width: 0 4px 4px; 
    border-style: solid; 
    border-color: #000000 transparent; 
    visibility: hidden; 
} 

table .headerSortUp, table .headerSortDown { 
    background-color: #f7f7f9; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
} 

table .header:hover:after { 
    visibility: visible; 
} 

table .headerSortDown:after, table .headerSortDown:hover:after { 
    visibility: visible; 
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
} 

table .headerSortUp:after { 
    border-bottom: none; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-top: 4px solid #000000; 
    visibility: visible; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
} 

pero sin suerte.

¿Alguien podría compartir la historia de éxito?

Answer 1

Tal vez se supone que debe ser añadido en el archivo original, el style.css (demo):

/* tables */ 
table.tablesorter { 
    font-family:arial; 
    background-color: #CDCDCD; 
    margin:10px 0pt 15px; 
    font-size: 8pt; 
    width: 100%; 
    text-align: left; 
} 
table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #e6EEEE; 
    border: 1px solid #FFF; 
    font-size: 8pt; 
    padding: 4px; 
} 
table.tablesorter thead tr .header { 
    background-image: url(bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 
table.tablesorter tbody td { 
    color: #3D3D3D; 
    padding: 4px; 
    background-color: #FFF; 
    vertical-align: top; 
} 
table.tablesorter tbody tr.odd td { 
    background-color:#F0F0F6; 
} 
table.tablesorter thead tr .headerSortUp { 
    background-image: url(asc.gif); 
} 
table.tablesorter thead tr .headerSortDown { 
    background-image: url(desc.gif); 
} 
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { 
    background-color: #8dbdd8; 
} 
table .header { 
    cursor: pointer; 
} 

/* bootstrap */ 
table.tablesorter .header:after { 
    content: ""; 
    float: right; 
    margin-top: 7px; 
    border-width: 0 4px 4px; 
    border-style: solid; 
    border-color: #000000 transparent; 
    visibility: hidden; 
} 
table.tablesorter .headerSortUp, table .headerSortDown { 
    background-color: #f7f7f9; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
} 
table.tablesorter .header:hover:after { 
    visibility: visible; 
} 
table.tablesorter .headerSortDown:after, table .headerSortDown:hover:after { 
    visibility: visible; 
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
} 
table.tablesorter .headerSortUp:after { 
    border-bottom: none; 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-top: 4px solid #000000; 
    visibility: visible; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    filter: alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
} 

Además, si desea agregar cualquier código HTML adicional dentro de la cabecera, hay una opción que no documentado onRenderHeader se puede utilizar para agregar, por ejemplo, dentro de un lapso de cada cabecera (ref):

$(function(){ 
    $("table").tablesorter({ 
    onRenderHeader: function(){ 
     this.prepend('<span class="icon"></span>'); 
    } 
    }); 
}); 

Answer 2

me enfrenté al mismo problema y encontró una solución muy simple:

table.tablesorter thead tr .header { 
    background-image: url(../img/tablesorter-bg-grey.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
    min-width: 30px; 
} 
table.tablesorter thead tr .headerSortUp { 
    background-image: url(../img/tablesorter-asc-grey.gif); 
} 
table.tablesorter thead tr .headerSortDown { 
    background-image: url(../img/tablesorter-desc-grey.gif); 
} 

Tienes que agregar a tus tablas ordenables la clase "tablesorter" por supuesto. He alterado las imágenes, debe ajustar los nombres de los archivos de imagen a las imágenes estándar incluidas.