Can't get up/down arrows to show in jQuery tablesorter
Question
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>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</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.
1 answers
solution1
2 ACCPTED 2017-01-29 16:33:15
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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.