The unsorted icons are not showing up. Other themes do not work, either. I'm not sure what I'm missing. I have provided my code below.
The icons only show up for the columns that I have set to sort in sortList.
I am unclear when I need to add a theme to widgets (e.g., widgets: ['uitheme'}) and when to use theme (e.g., theme: "bootstrap").
Do I need to include all of the css files that I have?
Is more needed in headerTemplate, particularly for bootstrap?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.widgets.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/parsers/parser-input-select.js"></script>
</head>
<script>
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: "bootstrap",
// sort on the first column and in ascending order PRIOR TO the sort on the selected column
// sort [column,asc=1 or desc=0]
sortList: [[1,0]],
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : false,
headerTemplate: '{content} {icon}',
// initialize zebra striping and filter widgets
widgets: ['uitheme','zebra', 'filter','output'],
//headers: {
//0: {sorter: 'checkbox', filter:true},
//1: {sorter: 'inputs',filter:true}
//},
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 100,
// if true, search column content while the user types (with a delay)
filter_liveSearch : true
}
});
});
The theme.bootstrap.css file appears to be missing. It contains the unsorted arrow definition.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/css/theme.bootstrap.min.css" >