table sorter images not applying in tablesorter.js?

Question

I am trying to apply the sorter images to table sorter table like the below.But the styles are not applying. using the below js file

https://github.com/Mottie/tablesorter

By default themes are applying so my table design is changing . i don't want the table sorter themes for images i will apply customize css. please check below code sorter images are not applying to my table sorter.

<style type="text/css">
.tablesorter thead tr .header {
    background-image: url('/Public/images/sorter/bg.gif');  
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
.tablesorter thead tr .headerSortUp {
    background-image: url('/Public/images/sorter/asc.gif'); 
}
.tablesorter thead tr .headerSortDown {
    background-image: url('/Public/images/sorter/desc.gif'); 
}
 </style>
<script type="text/javascript">
    $('#requestheader').tablesorter({
       /* theme: 'blue',*/
        sortList: [
            [1, 0]
        ],
        widgets: ['zebra', 'columns']
    });
 </script>

 <table class="tablesorter" id="requestheader"> 
                <thead>
                   <th></th>
                  <th></th>
                </thead>
                <tbody>
                </tbody>
</table>

Please tell me how to apply sorter images to table ?let me know the how to apply css to my table?

Answer 1

Try to wrap your jQuery code inside DOM ready handler:

$(function() {
    $('#requestheader').tablesorter({
       /* theme: 'blue',*/
        sortList: [
            [1, 0]
        ],
        widgets: ['zebra', 'columns']
    });
});

Answer 2

The latest version of tablesorter uses different class names from the original. Try using the following css:

.tablesorter thead tr .header {
    background-image: url('/Public/images/sorter/bg.gif');  
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
.tablesorter thead tr .headerSortAsc {
    background-image: url('/Public/images/sorter/asc.gif'); 
}
.tablesorter thead tr .headerSortDesc {
    background-image: url('/Public/images/sorter/desc.gif'); 
}

If you want to change the actual class name, then modify the cssAsc and cssDesc option.