CODEWITHSUNDEEP
jquerytablesorter
Tamar E. Granor
Tamar E. Granor

Reputation: 3937

Can't get up/down arrows to show in jQuery tablesorter

I've got the jQuery TableSorter 2.0 working so that clicking the column headers sort. But I cannot get the up/down arrows to show up. To simplify, I created a page using the sample from https://mottie.github.io/tablesorter/docs/index.html. Here's the code for the test page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Testing</title>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js"></script>
    <!-- <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.widgets.js"></script> -->
    <!-- <link href="tablesorter/css/theme.bootstrap.css" rel="stylesheet" type="text/css" /> -->


 <script type="text/javascript">
 $(document).ready(function() 
            { 
                $("#myTable").tablesorter(); 
            } 
        ); 
</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> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</body>
</html>

When I open the page in the browser (I've tried FireFox and Edge), the columns sort as expected but there are no up/down arrows.

I've looked at other posts about this problem, but the solutions either don't fit my situation or don't help.

I've tried this with and without the explicit CSS link, and with a couple of different themes I see in the css folder.

Upvotes: 0

Views: 1143

Answers (1)

Dekel
Dekel

Reputation: 62616

The up/down arrows are generated using the css file (the theme file).

You should use both the bootstrap's css file:

<link rel="stylesheet" href="/path/to/bootstrap-v3.min.css" />

And the theme.css file:

<link rel="stylesheet" href="/path/to/theme.default.css" />

Upvotes: 3

Related Questions