How to set the css for tablesorter and bootstrap?

Question

Tablesorter could make the sorting correctly in bootstrap 2, but I couldn't find out how to set the color and caret of table header.

The most likely css I found here is:

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;
}

but with no luck.

Could anyone share the success story?

Solution 1

Maybe it's supposed to be added on the the original style.css file (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;
}

Also, if you want to add any additional HTML inside the header, there is an undocumented onRenderHeader option that you can use to add, for instance, a span inside each header (ref):

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

Solution 2

I faced the same Problem and found a very simple solution:

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);
}

You have to add to your sortable Tables the class "tablesorter" of course. I've altered the images, you should adjust the imagefilenames to the standard images included.

Comments

[yiming]

Thanks for your quickly reply, but it doesn't work. The problem is this.prepend or this.wrapInner will display "object is not support" error.

[Mottie]

Hmm, it's working in the demo... try making the this into a jQuery object: $(this)

[yiming]

Oh! It works after add $(this). But still have issue about: 1. the "hand" didn't show while mouse point to the header, and it won't change color after sorting. Please help!

[Mottie]

To get the mouse pointer, make sure you've included cursor:pointer for the .header definition. To get different colors for the sort direction, split up this css definition: table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; }

[yiming]

Thanks for your patient answer, but it still not working. One more question, there're two difintion for tablesorter & table, it looks tablesorter css works, but bootstraps' is not. Is that correct?

[Mottie]

oh yeah, bootstrap is only targeting table, maybe you need to modify the bootstrap code to include the tablesorter class name: table.tablesorter... I'll update my answer above in a second.

[Mottie]

There might be some css priority conflicts, if you can't get something to work just right, add more specific selectors... the easiest method to see what is being applied is to use Chrome's Developer Tools (press F12) and inspect the element. Scroll through the styles to see what's being overridden.