Jquery Tablesorter CSS Arrow Icons

jquery tablesorter CSS arrow icons

Place a span tag in your th and style it with:

th.headerSortUp span {
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 15px;
}

tablesorter doesn't show up and down arrows

The problem you are having is due to css specificity (try out this calculator):

The default blue theme uses:

table.tablesorter thead tr .headerSortUp {} // (0,0,2,3)

so, in order to override this, you'll need a higher css specificity. One way would be to add a th to the sort class:

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4)

TableSorter: How can I change the position of sorting arrows

If you are using the default blue theme, all you need to do is change the background position of the arrows then add left padding to move the text away from it - demo

table.tablesorter thead tr .header {
    background-position: left center;
    padding-left: 20px;
}​

JQuery TableSorter: The sorting arrows don't show

I had the same problem when using tablesorter on this page - http://ajthomas.co.uk/fpl/. However, it's because I missed adding the stylesheets and images that come in the download. It looks like you did, too.

JQuery TableSorter- sorting arrows don't show

I just think your CSS classes are incorrect,
At least those are not the ones generated by tablesorter.

http://jsfiddle.net/thmd6/

table.tablesorter th.tablesorter-headerUnSorted {
    background-image: url('http://tablesorter.com/themes/blue/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

Add sorting arrows to th like table sorter

Issue is with your .headerSortUp background. I have changed it with below:

background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;

jsFiddle with absolute bg

Tablesorter missing arrows with semantic ui

Because semantic UI replaces the header background image that is included in most themes, you'll need to use the css icon options and header template to add the icon to the header (demo)

$(function() {
  $("#myTable").tablesorter({
    headerTemplate: '{content}{icon}',
    cssIcon: 'icon sort',
    cssIconDesc: 'down',
    cssIconAsc: 'up'
  });
});

Also, make sure you're using semantic UI v2.3.0, I noticed v2.2.2 was used in the demo and the sort arrows weren't displaying correctly.

Disable up/down icon from table header using Tablesorter, instead of hiding it

You can do it like this. In your css add two classes

thead th.up {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.down {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

Replace background-image with the images you want to display i.e up and down arrow with up arrow disabled and vice-versa.

Now in your js code.

$('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
        // the span wrapper is added by default
        this.wrapInner('<span class="icons"></span>');
    },
    cssAsc: 'up',
    cssDesc: 'down',
});

cssAsc and cssDesc will add 'up' and 'down' class respectively.

Documentation

It will do the job for you.In my jsfiddle you can see classes getting add on sorting.

Fiddle.

customize the tablesorter arrow image

That does work, but you might be missing the part where the theme option isn't changed from "default" (demo):

$('table').tablesorter({
    theme: 'default'
});

But, it might be better to just make that css more general, unless you want to change the image or border color on sorting (demo):

.tablesorter-default thead .tablesorter-header {
    background-image: url( My image );
    border-bottom: #000 5px solid;
}

---

Related Topics