CODEWITHSUNDEEP
javascriptjqueryhtmlcsssorting
user3147777
user3147777

Reputation: 113

JQuery TableSorter- sorting arrows don't show

I know this has been answered a couple times before, but none of the solutions work for me. I have spent a couple days trying to get the arrows to show with no success. I would like to show the sorting arrows and the column highlight when it is sorted. my html code is below: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme/style.css" media="print, projection, screen" />
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script> 
        <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js">    </script>
        <script type="text/javascript" id="js" >
            $(document).ready(function()
                    // call the tablesorter plugin 
                { 
                    $("#myTable").tablesorter({ 
                        // sort on the first column and third column, order asc 
                        sortList: [[0,0],[2,0]] 
                    });  
                }); 

        </script>

    </head>
    <body>
        <table id="myTable" class="tablesorter"> 
            <thead > 
            <tr> 
                <th>Last Name</th> 
                <th>First Name</th> 
                <th>Email</th> 
                <th>Due</th> 
                <th>Web Site</th> 
            </tr> 
            </thead> 
            <tbody> ...

The CSS I have linked to this is the one which is from the website shown below:

/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 12pt;
padding: 4px;
}
table.tablesorter th.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 th.headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter th.headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter th.headerSortDown, table.tablesorter th.headerSortUp {
background-color: #8dbdd8;
}

All the gif referenced in the CSS are in the same folder as it. I found when I deleted the .header the image showed but it would not change when I clicked to sort it. This is quite important I get this done as its for a project, so any help you can give will be greatly appreciated!!

Upvotes: 0

Views: 3832

Answers (1)

Flo Schild
Flo Schild

Reputation: 5294

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

Upvotes: 2

Related Questions